当我使用 Ajax 更新 html 时，Javascript 中断

Question

我最近一直在处理一个 web 应用程序，它与 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，并且适当的 View 不会更新(#ingDiv，如上面的调用所示)

我通过 Ajax 更改 HTML 是否以某种方式破坏了 javascript？我错过了一些明显的东西吗？如果还不清楚，我不是 Web 开发人员。

Answer 1

像这样使用事件委托(delegate)-

$('#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);
        }
    });
});

• > http://learn.jquery.com/events/event-delegation/
• > http://api.jquery.com/on/