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

【问题标题】：jQuery toggle function stops working after AJAX HTML data loadjQuery 切换功能在 AJAX HTML 数据加载后停止工作
【发布时间】：2014-05-08 11:20:00
【问题描述】：

我有一个带有一些 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 函数会停止工作吗？

【问题讨论】：

标签： php jquery html ajax

【解决方案1】：

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

使用$.on() insted of .click()：

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

解释：

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

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

【讨论】：

谢谢。您的解释帮助我理解了我只需要在日期重印后重新打印 jquery 函数。
其实使用$(document).on(...)的方案你就不需要每次日期重印都打印jquery函数了。

【解决方案2】：

试试这个：

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

还有一个函数……

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

在你的 AJAX 请求中，成功后添加：

checkForDOMElements();

这对你有用吗？

【讨论】：

您好，感谢您的回复。我通过在数据重印后再次重印该函数来解决此问题。

【解决方案3】：

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

您必须重新加载 javascript 函数才能用新元素刷新新的 DOM 树（新 HTML）。

【讨论】：

嗨，克里斯蒂扬，感谢您的回复。是否有一个函数调用来重新加载 javascript 或者我只是重新打印脚本调用？
@Bdevelle，您可以使用 Elias Soares 解决方案。如果您将使用重建，请使用 entiendoNull 解决方案。

【解决方案4】：

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

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

如果有更“最新”的方式来做这件事，我很想听听，但这对我来说非常有用。

【讨论】：