Question

在Javascript中..如果我有一个动态生成的按钮，我想要一个通用的onClick函数。我怎么能这样做？

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

我不想为每个按钮创建一个独特的onClick函数。我怎样才能做一个适用于所有人的单一的。例如，按下时显示其标签文字。

Answer 1

您可以使用名为“event bubbling”的Javascript功能来执行此操作。祖先元素会被告知其后代元素的事件。

在这种情况下，您可以将click处理程序附加到body元素，并且对这些按钮的所有单击都将触发事件处理程序。在jQuery中执行此操作的最好方法是使用on方法：

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

无论何时创建元素 - 在创建元素之前或之后，这都将起作用。

这与live方法完全相同，但live在幕后使用on，效率和灵活性都低得多。

Answer 2

如果您使用的版本低于jQuery 1.7，请使用live()

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

对于jQuery 1.7+，请使用on()

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

Answer 3

您可以将click事件委派给动态创建的按钮的父项。以下是对其工作原理的一个很好的解释：http://davidwalsh.name/event-delegate

在jQuery中，您可以使用live方法。请参阅http://api.jquery.com/live/

上的文件

Answer 4

您可以使用live方法将事件侦听器绑定到现有元素以及将来创建的元素。但是，这可以在创建按钮的代码之前或之后编写

$("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方法代替unbing和die off方法。

在jQuery＆gt; = 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 );
    })

将onClick事件添加到动态生成的按钮？

4 个答案: