点击事件未通过动态创建按钮触发

Question

我已经在div中动态创建了按钮。 并绑定按钮的click和其他事件。 但是问题是，单击事件仅触发了一个第一次单击按钮。 其他绑定事件也是如此。 示例代码是

 $('#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]');

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