Javascript 动态列表的最后一个按钮不总是使用jQuery触发click事件

我有一个简单的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');
  });
}

---

我正在使用jQuery2.0。

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

是否添加了一些调试输出以确认没有触发单击事件

添加了一个简单的测试，它在我测试的浏览器上不会失败，也许它仅限于您的浏览器

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

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();

---

应始终工作…是否在控制台中看到任何错误？你能做一个小提琴来重新产生这个问题吗？对不起，是的，我修复了拼写错误，我甚至添加了一个警报，适用于所有按钮，除了最后一个按钮，它有时会发出警报，有时不会。CSS也会影响事件吗？像webkit过渡？我不这么认为，但浏览器/机器性能可能会影响事件对meWow来说就像phonegap bug一样，我注意到我的按钮没有触发click事件的唯一时间是在我单击可滚动div中最后一个元素上按钮的文本部分时，如果我点击文本部分周围的任何地方，它就会一直工作。

for (var i=0;i<arr.length;i++) {
    create_button(i,arr[i]);
}

create_button(-1,{description:''}).hide();