1

我最近一直在研究的 webapp 出现问题，这与 ajax 重新加载破坏 javascript 有关。

我有以下 Ajax 调用

$.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？我错过了一些明显的东西吗？如果还不清楚，我不是网络开发人员。

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 回答