jQuery:为什么没有在生成的按钮上调用click函数

Question

这是一个解释我的问题的jsFiddle.如果您尝试单击"添加成分"按钮,则会调用按钮单击事件.我的问题是,当我点击"创建字幕"时,它会为每个子类别动态创建"添加成分"按钮.所有按钮都具有相同的ID,以"create-ingredient"开头,并与唯一ID连接,因此它为按钮创建唯一的ID.然后我在jQuery中使用"start with"选择器来选择以"create-ingredient"开头的所有按钮.它只是不选择动态创建的那些,它只适用于最初在html页面中的那个.

这是点动事件,而不是动态的点击事件:

$("[name^='create-ingredient']").click(function() {
    alert('ingredient clicked');
    return false;
});?

我需要更改什么才能调用动态创建的按钮事件？

谢谢!

Answer 1

click静态地连接事件.你想要的on,甚至在添加的元素上触发事件.

请注意,语法on略有不同click.您通常使用:

$("container").on("click", "selector", handler);

其中"container"选择一个静态容器元素(可以只是"document"),"selector"是你想要定位的元素.

叉小提琴.

编辑

根据David的评论澄清上述内容:使用on实际将事件处理程序附加到"容器",并将回调委托给容器内与"selector"匹配的任何元素.这是一个值得阅读JQuery文档的案例:

提供选择器时,事件处理程序称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.