傳遞活動，以外部函數

編輯輸入字段，每個元素的HTML更新後，但我想重新啓用/恢復單擊事件..

我試圖使點擊事件的外部功能，但我似乎無法讓'這個'正常工作/與功能溝通...

似乎無法找到很好的解釋如何將事件傳遞給功能...

正如你可以在小提琴看到，我嘗試做：

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

不過關，當然，這沒有什麼定義，所以它不會工作，所以我不得不重新呼叫/重新分配整個功能。

來源

2012-02-01 TrySpace

如果要啓用/禁用處理程序，你應該看看[我給答案】（HTTP：/ /stackoverflow.com/a/9103128/1106925）到你以前的問題。使用這種技術，就像添加/刪除類一樣簡單。 – 2012-02-01 23:07:50

您可以將函數定義爲變量。這樣，你可以僅僅通過它的變量名引用它單擊處理程序：

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

來源

2012-02-01 23:11:13 Jivings

確保在創建變量時使用'var'語句。如果你不這樣做，那麼所有的變量都會成爲全局變量。 – Jasper 2012-02-01 23:12:41

錯誤，對不起。修改我的答案。 – Jivings 2012-02-01 23:13:43

完美的，正是我所需要的，並且偏離「這個」仍然是「這個」，所以不需要通過它我猜... – TrySpace 2012-02-01 23:43:09

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

來源

2012-02-01 23:10:46 Jasper

傳遞活動，以外部函數

回答

相關問題