Question

我有一个非常基本的疑问......
在我的wordpress博客中，在我的自定义元数据框中，
这是我的事件处理程序：

jQuery('tr input.test').on('click', function( event ){
    event.preventDefault();
    var index = jQuery(this).closest('tr').index();
    set_row_index(index);
    .
    .
    .
    });

我有一张桌子，上一栏有按钮（输入类型 - >提交）“编辑”。在动态添加行时，新添加的行的“编辑”按钮不起作用。

jQuery('tr #confirm_add').on('click',function(){
   event.preventDefault();

  .
  .
  .
   html += "<td> <input type=\"submit\" id=\"select\" value=\"Edit\"></td>";
   .
   .
   .
   $('#metabox_row').prepend(html);

   // BIND ELEMENT HERE
});

我需要将此事件处理程序绑定到“编辑”按钮。请帮助解决如何实现这个目标

Answer 1

目前您使用的是“直接”绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

在动态生成元素时，您需要使用Event Delegation委托事件方法.on()。

脚本

$('#metabox_row').on('click', "input.select'", function(){
    //Your code
});

将类型更改为button

html += "<td> <input type=\"button\" id=\"select\" value=\"Edit\"></td>";

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

使用未命名的函数将元素绑定/取消绑定到JS事件处理程序

1 个答案: