Question

我使用动态ID动态生成一些按钮。我希望根据其ID来处理每个按钮的点击。但那不起作用。

以下是我的代码：

var del_id = "del"+countPage+"-"+questionCount;
 html+='<tr><td><input type="button" value="delete" id="'+del_id+'" /><td><input type="button" value="Copy" id="copy_id"/></tr>';
        $("#"+del_id).click(function(){
                                alert("jkhkjh");
                              });

如果我给静态id而不是del_id，那么它可以工作。我哪里出错了？我该如何解决这个问题？

编辑：解决

html+='<tr><td id="'+del_id+'"><input type="button" value="delete" id="'+del_id+'" /><td><input type="button" value="Copy" id="copy_id"/></tr>';


        $(document).on("click", "#"+del_id, function(){
                       alert("jkhkjh");
                       });

Answer 1

您必须使用Event-delegation将事件与动态加载的元素挂钩。

尝试，

  $(document).on("click", "#"+del_id, function(){

或者尝试这样做，不要为每个按钮注册事件，因为它们执行相同的任务。

  $(document).on("click", "[type='button'][id^='del']", function(){

或者向该按钮元素添加一个公共类，并尝试这样，

  $(document).on("click", ".buttonClass", function(){

Answer 2

尝试使用动态创建的按钮

$(document).on('click', 'buttonId/Class', function(){
   // Do something.
})

Answer 3

使用

$(document).on("click", "#"+del_id, function(){

});

Answer 4

您为2个不同的DOM元素（TD和输入）提供相同的ID。 Id应该是独一无二的。

然后jQuery只获取它找到的第一个DOM元素。

Answer 5

**.live()** - 此方法提供了将委托事件处理程序附加到页面的文档元素的方法，这简化了在将内容动态添加到页面时使用事件处理程序的方法。

$( "#dymanic" ).live( "click", function() { alert( "Goodbye!" ); // jQuery 1.3+ });

请参阅此文档

https://api.jquery.com/live/

Answer 6

如果您的控件是在页面上动态添加的，则应该使用将未来事件考虑在内的特殊事件来处理它们。例如on()或delegate()。

我会更喜欢delegate()因为我多次使用它。

$('body').on("#"+del_id, 'click', function(){
   //Do something.
});

注意： delegate()或on()您可以附加多个事件处理程序并使选择器搜索速度更快，因为您可以指定要在其中搜索的父元素。在这种情况下，我提到body作为父选择器。您可以指定更近的父节点。

jquery动态按钮单击不起作用

6 个答案: