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

Question

我有一个带有一些 HTML 的简单 PHP 文件(得到一个 UL>LI>UL>LI 形式的列表，它使用 toggle() 函数。该函数打开 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

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

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

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

解释:

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

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