javascript - 单击事件未通过动态创建按钮触发

Question

我在 div 中动态创建了按钮。并绑定按钮的点击和其他事件。但问题是，单击事件仅针对第一次单击的按钮触发。其他绑定事件也会发生同样的情况。示例代码是

 $('#divButtons input[type=button]').each(function () {
     $(this).bind('mouseover', function (e) {
         // some work
     }).bind('mouseout', function (e) {
         // some work
     }).bind('click', function (e) {
         // some work
     });
 });

绑定它时效果很好document.ready()但在我的情况下，按钮是在 DOM 准备好之后创建的。

我也想知道为什么它会这样......？

Answer 1

如果使用 jQuery 1.7+，请使用 on()，并且真的不需要 each()：

$(document).on({
    mouseover: function(e) {
            // some work
    },
    mouseout: function(e) {
           // some work
    },
    click: function(e) {
           // some work
    }
}, '#divButtons input[type=button]');

用最近的非动态元素替换委托事件处理程序的文档。