1

我正在构建一个允许用户将成分添加到数组的应用程序。同时项目被添加到用户界面供用户查看。在附加到 DOM 中，我添加了一个名为“data-item-index”的属性。当用户然后单击该行项目时，我希望 JS 能够读取“data-item-index”的值，以便我可以拼接该项目的数组。现在，无法检测到对 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);
        })
4

1 回答 1

0

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

http://api.jquery.com/on/

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

});
于 2013-10-14T23:09:36.187 回答