jQuery toggle function stops working after AJAX HTML data load

Question

I have a simple PHP file with some HTML (got a list in the form of UL>LI>UL>LI, which uses the toggle() function. The function opens the ULs and shows or hides the LIs). The page also has an input form that works correctly (adds data to the database).

Once the AJAX form has been successful, I delete the entire div and reprint it from the database.

My problem: once the new page is printed, the toggle() function stops working until the page is refreshed.

The toggle function (in external JavaScript file):

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

The form:

   <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>

The form sending function:

           $("#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
            }      
    });        

What I get printed in the 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>

Now, the toggle() function works great before I add a product. The lists opens and closes without any problems. I do not get any errors in the console and I load jQuery in the page head (first item).

I would like to note that looking at the source code before and after the code print looks exactly the same, except the new additional LI that is printed.

Am I missing something? Do jQuery functions stop working after a div data refresh?

Answer 1

If your element is been removed after click event binding, it will not call the event handler function.

Use $.on() insted of .click():

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

Explained:

$(".product_category").click() binda a function to the .product_category elements at that moment. If one or all elements are removed, then the event bind also will be removed.

$(document).on() will bind an event to entire document, and will filter every click to check if the click occurred in a '.product_category' element.