jQuery can't bind event to AJAX loaded element using .on() [duplicate]

Answer 1

In this case you need to use on in a similar way to delegate, the syntax you are using is the replacement for bind.

$("#step_2").on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});

The first selector has to be an element that won't be replaced. This way, when the event bubbles up to this point it is caught. You then specify the actual element that will trigger the event as the 2nd parameter of .on.

Answer 2

on(...) won't subscribe to events that aren't on the page yet without the proper setup. To do what you want, you should try the following:

$(document).on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});

To make this more efficient, you should replace $(document) with the closest parent of the element that you know will be on the page when this code is called.

Answer 3

Sure it can,

$(document).on("change", "#subcategory_id", function(){...});

To delegate events using .on, provide a parent element to bind to, and then the selector to delegate to.

Answer 4

You have to set the event after that you have loaded the new element. As AJAX is asynchronous, you need to have a callback in your load.

$(document).ready(function() {

    $("#category_id").change(function() {
        $("#spinner").show();
        $("#step_2").load("process.php?selected=category", { value: $(this).val() }, 
        function() {
        // Do something to say the data has loaded sucessfully
            $("#spinner").hide();

            $("#subcategory_id").on("change", function(){
                alert( 'Success!' );
            });

        });
    });

});

Answer 5

You have to bind the handler after you've loaded the html, or use

$("#step_2").on("change", "#subcategory_id", function(){
    alert( 'Success!' );
});