jQuery切换函数在加载AJAX HTML数据后停止工作 - jQuery toggle function stops working after AJAX HTML data load

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

AJAX表单成功后，我删除整个div并从数据库中重新打印它。

我的问题:一旦新页面打印，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。

我错过了什么吗?jQuery函数停止工作后，div数据刷新?

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

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

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

解释道:

$(".product_category").click()将函数绑定到时刻的.product_category元素。如果一个或所有元素被删除，那么事件绑定也将被删除。

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

试试这个:

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

和一个函数…

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

在AJAX请求中，成功后添加:

checkForDOMElements();

这个对你有用吗?

主要问题是:当您加载页面时，您拥有一个包含所有元素的DOM树。Javascript保存这个DOM。之后，从DOM树中删除所有元素并加载新的。但是对于javascript，元素只会被删除，js无法检测到toolgle()函数的新元素。

你必须重新加载javascript函数来用新元素刷新新的DOM树(新的HTML)

我在遇到完全相同的问题时找到了这个解决方案。我正在构建一个复杂的webtool，使用Ajax/JSON，其中包含HTML与JS事件内置到JSON。

为了在调用上更细粒度，我包装了与特定Ajax/JSON HTML替换有关的每个特定JS事件，并在加载时以及Ajax成功后调用它。

如果有更"最新"的方法来做到这一点，我很乐意听到，但这对我来说很有效。