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

Question

我有一个带有一些HTML的简单PHP文件（使用toggle()功能使用UL> LI> UL> LI的形式获取列表。该功能将打开UL，并显示或隐藏LI）。该页面还具有可以正常工作的输入表单（将数据添加到数据库）。

一旦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外，在代码打印之前和之后查看源代码看起来完全一样。

我想念什么吗？div数据刷新后jQuery函数是否停止工作？

Answer 1

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

使用$.on()于.click()：

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

解释：

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

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