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?

Here's my thought. I can make a function that compares file path, and for each condition, then I will apply correct listeners to those new elements based on what page that AJAX loaded. I feel like it will makes the function so big if I have a large amount of pages.

Thanks!

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?

Here's my thought. I can make a function that compares file path, and for each condition, then I will apply correct listeners to those new elements based on what page that AJAX loaded. I feel like it will makes the function so big if I have a large amount of pages.

Thanks!

• javascript
• jquery
• ajax
• addeventlistener

• 2 Use event delegation. – SLaks Commented Jul 23, 2013 at 21:30
• What you described as your thought is essentially how it's handled in JQM if you're using a global script, you'd just listen for a pageinit with a specific id. Yes, it can get large. For events that are common to all pages, you can save coding by using event delegation. – Kevin B Commented Jul 23, 2013 at 21:31

5 Answers 5

Two ways:

1) Bind on a non-dynamic parent container using .on()

$('.some-parent-class').on('click', '.element', function() {
  // DO STUFF!
});

2) Bind the new elements after ajax call is completed

$.ajax(url, {
  // ajax options
}).done( function(data) {
  var newEl = $('<div class="element"></div>');
  // Setup your newEl with data here...
  newEl.on('click', function() {
    // do stuff
  });
  newEl.appendTo($('.some-parent-class'));
});

The former usually results in quicker ajax response times, but may also slow click responsiveness down.

Use jQuery's .on() to handle event delegation. The first element you supply is a static element (never removed / replaced). the first argument is the event you wish to delegate against, mouseover/click, etc. The 2nd argument is the element we wish to have the event fire on when the event occurs. The 3rd argument is the callback, which is the function to run when the event fires.

$(document).on('event', 'elementIdentifier', function(){
    //your code
});

$(".parent-div").on("click", ".child-div-class-name" ,function(){
  somefunction();
});

all the new inserted elements inside the .parent-div will be having the listeners onclick

Adding on to Populus' answer, which is great as it is, a logically equivalent solution to his second option would be to use Promises:

     var iGotYou = new Promise(function (res, rej) {
        $.ajax({
             //ajax paramaters
        })
            .done(function( data ) {
                //handle the data as necessary...
                //then resolve the Promise
                res();
            });
    });

    //the Promise has been resolved
    iGotYou.then(function (response) {
        //add the event listener now that the promise has been fulfilled
       document.getElementById('someId').addEventListener('click', function (e) {
        //whatever you want to do on click event
       });
    })

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 <button id="new-button">Click me</button>
    $.get('url', function(res) {
        $('body').append(res);
    });
});