將onClick事件添加到動態生成的按鈕？

在Javascript中..如果我有一個動態生成的按鈕，我想要一個通用的onClick函數。我怎樣才能做到這一點？將onClick事件添加到動態生成的按鈕？

<script> 
for(i=0;i<something.length;i++){ 
    $('body').append('<button id="btnInit'+i+'" >'+i+'</button>'); 
} 
</script>

我不想爲每個按鈕創建一個獨特的onClick函數。我該如何做一個適用於所有人的單一方法。例如按下時顯示其標籤文本。

來源

2012-01-02 Morano88

只是一個建議：避免讓多個DOM插入一個循環。如果可能的話，在循環外面做一個append（）。或者 - 至少 - 爲了性能而緩存對$（'body'）的引用 – fcalderan 2012-01-02 14:51:37

創建這個小提琴以向您展示創建按鈕的替代方法; http://jsfiddle.net/eacUJ/ – Stefan 2012-01-02 15:19:26

您可以通過使用所謂的「事件冒泡」一個Javascript功能做到這一點。祖先元素被通知他們的後代元素的事件。

在這種情況下，您可以將click處理程序附加到body元素，並且對這些按鈕的所有點擊都將觸發事件處理程序。在jQuery來做到這一點，最好的辦法是使用on方法：

$(document.body).on('click', 'button', function() { 
    alert ('button ' + this.id + ' clicked'); 
});

這將工作時的元素創建不管 - 前或元素被創建之後。

這與live方法完全相同，但live在幕後使用on，效率和靈活性要低得多。

來源

2012-01-02 14:50:49 lonesomeday

用於on（）方法。以前從來不知道。我一直在廣泛使用live（）。這改變了一切。謝謝 – 2012-01-02 15:16:29

@AhmadAlfy這可能是因爲它是1.7.0版中引入的API的新增內容。 – lonesomeday 2012-01-02 16:42:13

您可以將點擊事件委託給動態創建的按鈕的父項。下面是一個很好的解釋：http://davidwalsh.name/event-delegate

在jQuery中，您可以使用live方法。請參閱其文檔http://api.jquery.com/live/

來源

2012-01-02 14:49:22 qiao

您可以使用活動方法將事件偵聽器綁定到現有元素以及將來創建的元素。然而，這可以前或是在按鈕創建

$("button[id^=btnInit]").live("click", function(){ 
    // `this` is reference to each button separately - function will be called many times as how many buttons are 
    alert(this.id); 
})

在jQuery中的最新版本，您可以改用既bind和live的on方法，而是和die的off方法的代碼後寫。

在jQuery中> = 1.7

$("body").on("click","button[id^=btnInit]", function(){ 
     // `this` is reference to each button separately - function will be called many times as how many buttons are 
     alert(this.id); 
    })

來源

2012-01-02 14:49:28 abuduba

如果您使用的是版本低於1.7的jQuery，使用live()

$('input[name^="btnInit"]').live("click", function(){ 
    alert("clicked"); 
});

的jQuery 1.7+，使用on()

$("body").on("click", "input[name^="btnInit"]", function(){ 
     alert("clicked"); 
});

來源

2012-01-02 15:02:25 Shyju

將onClick事件添加到動態生成的按鈕？

回答

相關問題