用Jquery處理大量點擊事件的更好的解決方案

Question

我在頁面中有大量的按鈕，我想爲每個按鈕添加一個點擊事件，也就是當用戶單擊它顯示的按鈕時相應的按鈕值。

我已經在匿名函數的幫助下實現了一個方法。我已經包括了我的代碼如下

HTML

<div id="div1"/> 

的Javascript

$(document).ready(function(){ 
    for(var i =0;i<100;i++) 
    { 
     $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> "); 
    }; 

    $(".myclass").click(function(e){ 
     alert(e.target.id); 
    }); 
}); 

它可以正常使用，這個問題是一個匿名函數爲每個按鈕創建此表上，也就是說，如果我的頁面中有10k個元素，則匿名函數將創建10k次，即i think i causes big memory wastage。 有沒有更好的方法來實現這個？請幫我解決這個問題，任何幫助將不勝感激。謝謝

Answer 1

我認爲你可以使用使用事件代表團來解決這個問題。

事件代表是一種通過一個共同的父母而不是每個孩子迴應ui事件的機制。

更多有關事件代表團可以參考this堆棧溢出問題

在你情況下，最好用事件委派

您可以使用下面的代碼

$(document).ready(function(){ 
    for(var i =0;i<100;i++) 
    { 
     $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> "); 
    } 
    $("#div1").click(function(e){ 
     if($(e.target).hasClass("myclass")) 
      alert(e.target.id); 
    });  
}); 

你可以檢查這我已經包括一個這樣的例子DEMO

或者你可以通過克里斯的解決方案，它也將正常工作

Answer 2

你想jQuery的on功能，沿着這些線路...

$("#containerdiv").on('click', '.myclass', function() { 
    alert($(this).id); 
}); 

Answer 3

$(document).ready(function(){ 
var callback=function(){ 
      console.log(this.id); 
    } ; 
$('#div1').on('click','button.myclass',callback); 
    for(var i =0;i<100;i++) 
    { 
     $("#div1").append("<input type='button' class='myclass' id='mybutton" + i + "' value='mybutton" + i + "'> "); 
    }; 


});  






this is called event delegation.