jQuery 切换函数在 AJAX 加载 HTML 数据后停止工作

Question

我有一个简单的PHP文件，其中包含一些HTML（以UL>LI>UL>LI形式列出列表，使用toggle()函数。该函数打开UL并显示或隐藏LIs）。该页面还有一个输入表单，可以正确地工作（将数据添加到数据库中）。

一旦AJAX表单成功提交，我就会从数据库中删除整个div并重新打印它。

我的问题是：一旦新页面被打印出来，toggle()函数就会停止工作，直到刷新页面。

toggle函数（在外部JavaScript文件中）：

        $(document).ready(function() {
    $(".product_category").click(function(event) {
         event.preventDefault();
         $(this).find("ul > .product").toggle();
     });
});

表单：

   <form id="addPForm">
                    <section id="product_input">
                        <input id="list_add_product" type="text" placeholder="Add a new product" onkeyup="checkProducts()">
                        <input id="list_add_product_button" type="button">
                    </section>
                </form>

表单发送功能：

           $("#list_add_product_button").click(function(event){
        var txt=$("#list_add_product").val();
        $.ajax({
                type: "POST",
                url: "addproduct2.php",
                cache: false,
                data: {product: txt},
                success: onSuccess,
                error: onError
            });
            // IF THE SUBMIT WAS SUCCESFULL //          
            function onSuccess(data, status)
            {
                console.log(data);
                clearInput();
                $('#main_list').empty();
                $('#main_list').html(data);
            }
            function onError(data,status){
                // something
            }      
    });        

我在console.log(data)中打印出的内容:

    <div class="product_category"><li id="baked" onclick="showBakedList();"><a class="list_text" id="baked_text">Baked [2]</a></li><ul id="ul_baked" class="inner_list"><li class="product" id="bread"><a class="liText">Bread | 0 Unit</a> </li><li class="product" id="croissant"><a class="liText">Croissant | 0 Unit</a> </li></ul>

现在，在我添加产品之前，toggle()函数可以很好地工作。列表可以正常打开和关闭。控制台中没有任何错误，并且我在页面头部（第一个项目）加载了jQuery。

需要注意的是，在代码打印之前和之后查看源代码，除了打印的新附加LI之外，完全相同。

我是否遗漏了什么？在div数据刷新后，jQuery函数会停止工作吗？

- Bdevelle

Answer 1

如果您的元素在单击事件绑定后被移除，它将不会调用事件处理程序函数。

请使用$.on()代替.click():

$(document).on('click', '.product_category', function(event) {
    // Your function here
}

解释：

$(".product_category").click() 在那一刻将一个函数绑定到.product_category元素。如果一个或多个元素被移除，则事件绑定也将被删除。

$(document).on() 会将事件绑定到整个文档，并过滤每个点击以检查点击是否发生在“.product_category”元素中。

- Elias Soares

---

谢谢。你的解释帮助我明白了，我只需要在日期重新打印之后重新打印jQuery函数即可。 - undefined

实际上，使用$(document).on(...)的解决方案，您将不需要每次重新打印jQuery函数。 - undefined

Answer 2

试试这个：

$(document).ready(function() {
  checkForDOMElements();
});

还有一个函数...

function checkForDOMElements(){
   $(".product_category").click(function(event) {
       event.preventDefault();
       $(this).find("ul > .product").toggle();
       });
   }

在您的AJAX请求中，在成功后添加以下内容：

checkForDOMElements();

这对您有效吗？

- faerin

---

嗨，谢谢你的回复。我通过在数据重新打印之后再次重新打印函数来解决了这个问题。 - undefined

Answer 3

主要问题是这样的： 当你加载页面时，你有一个包含所有元素的DOM树。Javascript保存了这个DOM。然后你从DOM树中删除所有元素并加载新的元素。但是对于Javascript来说，这些元素只是被移除了，js无法检测到新的元素以供你的toogle()函数使用。

你需要重新加载javascript函数，以刷新带有新元素的新DOM树（新HTML）。

- Kristiyan

---

嗨Kristiyan，谢谢你的回复。是否有一个函数调用可以重新加载JavaScript，还是我只需重新打印脚本调用？ - undefined

@Bdevelle，你可以使用Elias Soares的解决方案。 如果你要使用重建(rebuild)，请使用entiendoNull的解决方案。 - undefined

Answer 4

我在遇到完全相同的问题时找到了这个解决方案。我正在构建一个复杂的网络工具，它使用Ajax/JSON来包含带有内置JS事件的HTML。

为了更精细地处理调用，我对每个与特定Ajax/JSON HTML替换相关的JS事件进行了封装，并在加载后以及AJAX成功后调用它。

如果有更“最新”的方法来做这个，我很愿意听听，但是这对我来说非常好用。

- Chad