传递活动，以外部函数

Question

小提琴我：

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

编辑输入字段，每个元素的HTML更新后，但我想重新启用/恢复单击事件..

我试图使点击事件的外部功能，但我似乎无法让'这个'正常工作/与功能沟通...

似乎无法找到很好的解释如何将事件传递给功能...

正如你可以在小提琴看到，我尝试做：

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

不过关，当然，这没有什么定义，所以它不会工作，所以我不得不重新呼叫/重新分配整个功能。

Answer 1

您可以将函数定义为变量。这样，你可以仅仅通过它的变量名引用它单击处理程序：

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); 

Answer 2

演示：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);