1

最近取り組んでいる webapp に問題があり、javascript を壊す ajax のリロードに関係しています。

次のAjax Callがあります

$.ajax({
                type: "POST",
                url:  "/sortByIngredient/",
                data: JSON.stringify(
                {
                    selectedIngredients: tempDict
                }),
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    var curList = $("#drinkList").contents();
                    console.log(curList);
                    $("#drinkList").empty()
                    $("#drinkList").append(data)

および次の Html UL

 <div id = "drinkList" class="d-list">
                <ul>
                    <li id='someID'>some Item</li>
                    <li id='someID2'>some Item2</li>
                </ul>
            </div>

また、クリックされたリスト項目でアクティブになるように jQuery コールバックを設定しています。初期ロードでは、すべてが正常に機能します。ajax 呼び出しが発生すると、 #drinkList の内容が同じ形式の別のリストに置き換えられます。興味のある方のために、onClick コールバックを次に示します。

$("li").click(function()
    {
        window.currentDrink = $(this).attr("id");
        console.log(window.currentDrink);
         $.ajax({
            url: "/getDrink/" + $(this).attr("id"),
            type: "get",
            success: function(data){
                $("#ingDiv").html(data);
            }
        });
    });

その Ajax 呼び出しを行った後、リストは正しく変更されますが、その後は JavaScript が機能しないようです。たとえば、リスト項目をクリックしても console.log が呼び出されず、適切なビューが更新されません (上記の呼び出しに示されている #ingDiv)。

Ajax を使用して HTML を変更すると、何らかの方法で JavaScript が壊れますか? 明らかな何かが欠けていますか？まだ明確でない場合、私は Web 開発者ではありません。

4

1 に答える 1

5

このようにイベント委任を使用します-

$('#drinkList').on('click','li',function(){
     // do your stuff here
});

あなたは Web 開発者ではないので、変更後のコードは次のようになります。

$('#drinkList').on('click', 'li', function () {
    window.currentDrink = $(this).attr("id");
    console.log(window.currentDrink);
    $.ajax({
        url: "/getDrink/" + $(this).attr("id"),
        type: "get",
        success: function (data) {
            $("#ingDiv").html(data);
        }
    });
});
于 2013-05-17T19:56:07.813 に答える