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”是你想要定位的元素。

Forked Fiddle.

修改

根据David的评论澄清上述内容：使用on实际上将事件处理程序附加到“容器”，并将回调委托给容器内与“selector”匹配的任何元素。在这种情况下，值得阅读JQuery docs：

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

Answer 2

尝试： jQuery（＆gt; 1.7）

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

或者对于较旧的jquery（＆lt; 1.7）

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

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

2 个答案: