小编Tad*_*dgh的帖子

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