Question

我有一个带有一些HTML的简单PHP文件（以UL＆gt; LI＆gt; UL＆gt; 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

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

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

$(".product_category").click()

说明：

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

{{1}}会将事件绑定到整个文档，并会过滤每次点击以检查点击是否发生在“.product_category＆＃39;元件。

Answer 2

试试这个：

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

一个功能......

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

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

checkForDOMElements();

这对你有用吗？

Answer 3

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

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

Answer 4

我发现此解决方案时遇到了完全相同的问题。我正在构建一个使用Ajax / JSON的复杂网络工具，其中包含HTML和JSON中内置的JS事件。

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

如果有更多“最新”的方式可以做到这一点，我很想听听，但这对我来说很棒。

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

4 个答案: