动态列表的最后一个按钮并不总是用jQuery触发点击事件

last button of dynamic list not always firing click event with jQuery

本文关键字：jQuery 事件 列表 最后一个 按钮 动态      更新时间：2023-09-26

我有一个简单的div，我动态地将按钮附加到其中，现在除了列表中的最后一个元素外，所有按钮单击事件都会触发，有时它会触发，但有时不会。如果我点击按钮中的左侧或右侧图标，它会正常工作，如果我点击文本或按钮中间，有时它会启动，有时不会。

<div id="btn-list"></div>

在页面加载上，在我的dom加载后，我附加了一个随机数目的按钮，并将点击事件侦听器添加到按钮中。

$( function () {
  for (var i=0;i<arr.length;i++) {
    var item = arr[i];
    var btn = $(document.createElement('button'));
     btn.text(item['description']);
     btn.attr('id', i);
     $("#btn-list").append(btn);
  }
  $('#btn-list').on('click', 'button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.location.replace('blah.html');
  });
}

我使用的是jQuery 2.0。

如果没有额外的代码，这个片段应该不会失败。请记住，对添加的最后一个按钮的引用保留在btn中，因此，如果在代码的其他部分修改了元素或其事件，则会改变预期的行为。

您是否添加了一些调试输出以确认单击事件没有被激发？http://jsfiddle.net/AstDerek/gKJNe/

$('#btn-list').on('click', 'button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    alert('blah.html');
})

添加了一个简单的测试，它在我测试的浏览器上不会失败，也许它仅限于你的浏览器？http://jsfiddle.net/AstDerek/gKJNe/1/

现在，如果您将按钮创建封装到自己的函数中，会发生什么？

function create_button (index,properties) {
    var btn = $(document.createElement('button'));
    btn.text(properties.description);
    btn.attr('id',index);
    $("#btn-list").append(btn);
    return btn;
}
for (var i=0;i<arr.length;i++) {
    create_button(i,arr[i]);
}

最后，作为一种变通方法，为什么不添加一个隐藏按钮作为最后一步呢？

for (var i=0;i<arr.length;i++) {
    create_button(i,arr[i]);
}
create_button(-1,{description:''}).hide();
相关文章：