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?

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!

Answer 1

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.