1

ユーザーが配列に材料を追加できるアプリを構築しています。同時に、ユーザーが表示できるように項目が UI に追加されます。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

動的に追加された要素は、'click' の代わりに jQuery 'on' を使用する必要があります。

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

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

});
于 2013-10-14T23:09:36.187 に答える