Jquery 为什么.on（）在使用多个事件处理程序时不支持委托（future元素）？

使用.live：

演示：

在这里，代表团运作良好。如果单击“按钮”或“新建”，将创建新的按钮元素

使用。关于：

演示：

在这里，授权不起作用“新建”按钮单击不创建元素无法激发

那么，我们如何在具有delegationfuture元素的多个事件处理程序上使用

---

这可能吗？

如果是$，则必须将事件绑定到父元素，如下所示

$(document).on({
  click: function() {
        $(this).after('<input type="button" value="new" />');
  },
  mouseover: function() {
        //do something
  },
  mouseout: function() {
        //do something
  }
},':input[type=button]');​

在本例中，我绑定到文档，您可以绑定到dom中始终存在的任何父级

参考资料：

请尝试以下代码：

$(document).on({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
}, ':input[type=button]');​

若要委派处理已创建/将来的元素，您需要将事件附加到文档，并使用.on函数的“selector”参数以事件为目标。未经测试，但在理论上应该有效！请参阅文档，并有一节介绍如何移动到.on函数

---

Edit只是想添加，正如@Joy在他的回答中所说的，您不需要附加到文档，虽然您需要确保元素不会受到可能删除事件处理程序的ajax/dom更改的影响，但越接近您委托给的目标元素越好。

您需要将事件附加到文档的这一部分在技术上是不正确的。您只需要将事件处理程序附加到一个元素。永远都要在场，b。包含要将事件委派给的所有元素。文档是示例的最佳选择，因为它总是要满足这两个条件，但如果您能在实际HTML文档中识别出一个更具体的元素，您应该使用它。@AnthonyGrist您是对的，我刚刚更新完帖子，您回答：D

$(document).on({
  click: function() {
        $(this).after('<input type="button" value="new" />');
  },
  mouseover: function() {
        //do something
  },
  mouseout: function() {
        //do something
  }
},':input[type=button]');​

$(document).on({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
}, ':input[type=button]');​