傳遞活動，以外部函數

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