What is a proper way to add listeners to new elements after using AJAX to get the html content? (jQuery, Javascript)

Question

I am making something that can loads new setting pages via AJAX, I am not sure what\'s the most efficient way to bind listeners to those elements from the new content page?<

Answer 1

I'm not entirely sure what you're asking here, but you can use jQuery's .on() function to bind to elements that already exist in your document, OR elements that will exist in the future.

Here's a quick example:

$(document).ready(function () {
    $(document).on('click', '#new-button', function() {
        alert("You clicked the new button");
    });

    //get some HTML via ajax. Let's assume you're getting Click me
    $.get('url', function(res) {
        $('body').append(res);
    });
});