Javascript 在您'；我用JS添加了它

我正在构建一个应用程序，允许用户向数组添加成分。同时，这些项目被添加到UI中，供用户查看。在DOM的附加中，我添加了一个名为“数据项索引”的属性。当用户单击该行项目时，我希望JS能够读取“数据项索引”的值，以便拼接该项目的数组。现在，无法检测到对li的单击。可能是因为它不是原始DOM的一部分。我们如何做这类事情。与JS稍后添加的DOM元素交互

仅供参考，在代码中，我只是使用数字“3”作为测试索引

        ingredient_list = [];
        yummly_search = "";

        $(".ingredient").click(function() {
            // alert("You clicked on" +  $(this).attr('data-item-name') );
            var new_ingredient = $(this).attr('data-item-name');

            ingredient_list.push(new_ingredient);
            console.log(ingredient_list);
            // Add to the Yummly api call string 
            yummly_search = yummly_search.concat(new_ingredient + "+");
            console.log(yummly_search);
            // Show new ingredient in UI
            $("#ingredients-list").append("<li class='shopping_list' data-item-index='3'>" + new_ingredient + "</li>");
        });

        // Remove from ingredient list
        $(".shopping_list").click(function() {
            var x = $(this).attr('data-item-index');
            console.log(x);
            ingredient_list.splice(x,1);
            console.log(ingredient_list);
        })

成分列表=[]；
美味搜索“”；
$（“.component”）。单击（函数（）{
//警报（“您单击了”+$（this.attr（'data-item-name'））；
var new_component=$（this.attr（'data-item-name'）；
成分列表。推送（新成分）；
控制台日志（成分列表）；
//添加到Yummly api调用字符串
yummly_search=yummly_search.concat（新配料+“+”）；
控制台日志（yummly_搜索）；
//在UI中显示新成分
$（“#配料表”）。追加（“
”+新配料+”
”；
});
//从配料表中删除
$（“.shopping_list”）。单击（函数（）{
var x=$（this.attr（'data-item-index'）；
控制台日志（x）；
成分列表拼接（x，1）；
控制台日志（成分列表）；
})

动态添加的元素需要使用jQuery“on”而不是“click”

---

可以使用事件委托，也可以将处理程序绑定到每个新元素。为后者使用命名函数，以便您可以再次引用它。您可以展示一个示例吗？作为事件委派的快速介绍，尤其是在您使用jQuery时，请签出。这仍然是所有元素上的直接绑定事件，这些元素在运行时与选择器

'.component'

匹配，因为在这种形式下

.on（）

是

.bind（）

的替代品。如果你想的话，你必须改变呼叫的结构。我把它改成这个，现在就可以了。谢谢$（“#成分列表”）。在（“单击”、“li”上，函数（事件）{event.preventDefault（）；不确定event.preventDefault（）是否需要。@JonPaulBerti这不是这个答案中建议的，所以接受它对未来的读者来说有点误导。

.on

是所有事件绑定的通用函数，而不仅仅是委托事件。

.click

只是这个答案中显示内容的简写。

$(document).on('click', '.ingredient', function(){

});