Question

我最近一直在处理一个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吗？我错过了一些明显的东西吗如果尚不清楚，我不是网站开发人员。

Answer 1

使用像这样的事件委托 -

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

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

1 个答案: