Передача событий во внешнюю функцию - PullRequest
Новая
       1

Передача событий во внешнюю функцию

2 голосов
/ 02 февраля 2012

Поиграй мне в этом:

http://jsfiddle.net/TrySpace/QZMP6/17/

После редактирования поля ввода html обновляется для каждого элемента, но я хочу включить / восстановить событие щелчка ..

Я пытался сделать событие нажатия внешней функцией, но я не могу заставить 'this' работать должным образом / общаться с функцией ...

Не могу найти хорошего объяснения, как передавать события в функции ...

Как вы можете видеть в скрипке, я пытаюсь сделать: 

$(this).on("click");

Но, конечно, он ничего не определяет, поэтому он не будет работать, поэтому мне придется перезвонить / переназначить всю функцию.

Ответы [ 2 ]

1 голос
/ 02 февраля 2012

Вы можете определить функцию как переменную.Таким образом, вы можете просто ссылаться на него в обработчике кликов по имени переменной:

http://jsfiddle.net/QZMP6/25/

var clicky = function()
{
    var currentClickedDIV = this.id;
        $('#output').append("Clicked: "+currentClickedDIV +"<BR>");   
    var currentClickedDIVContent = $(this).html();
        $('#output').append("HTML: "+currentClickedDIVContent +"<BR>" );  

   //Make current html content editable
   $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>");

     //prevent more triggers within element       
   $(this).off("click").on("click", function (e) {
        e.stopPropagation();
    });
    //Focus cursor on input
    $("#currentInput").focus();

    var $that = $(this);
    //On blur replace with plain html, also reenable click?
    $("#currentInput").blur(function(){
        var currInput = $("#currentInput").val();
        $("#"+currentClickedDIV).html(currInput );
        $('#output').append("New HTML: "+ currInput  +"<BR>" );
        $that.on("click", clicky);
    });


    return false;
}

$('.cuboid').on('click', clicky );
0 голосов
/ 02 февраля 2012

Демо: http://jsfiddle.net/QZMP6/23/

Если вы измените это: 

   //Make current html content editable
   $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>");

на это: 

   //Make current html content editable
   $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>").children().on('blur', function () {
        $('#' + currentClickedDIV).off('click').on('click', external_click);
    });

Обработчик события будет повторно присоединен послеЭлемент ввода blur ред.Также обратите внимание, что я переместил ваш код во внешнюю функцию с именем external_click.Вот код из демоверсии, размещенной выше: 

function external_click() {
        var currentClickedDIV = this.id;
            $('#output').append("Clicked: "+currentClickedDIV +"<BR>");   
        var currentClickedDIVContent = $(this).html();
            $('#output').append("HTML: "+currentClickedDIVContent +"<BR>" );  

       //Make current html content editable
       $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>").children().on('blur', function () {
            $('#' + currentClickedDIV).off('click').on('click', external_click);
        });

        //Focus cursor on input
        $("#currentInput").focus();

        //On blur replace with plain html, also reenable click?
        $("#currentInput").blur(function(){
            var currInput = $("#currentInput").val();
            $("#"+currentClickedDIV).html(currInput );
            $('#output').append("New HTML: "+ currInput  +"<BR>" );
        });


        //prevent more triggers within element
        console.log($(this));
        $(this).off("click").on("click", function (e) {
            e.stopPropagation();
        });

        return false;
    }
$('.cuboid').on('click', external_click);
...