CODEWITHSUNDEEP
javascriptjqueryajaxaddeventlistener
Lumin
Lumin

Reputation: 111

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

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!

Upvotes: 9

Views: 20247

Answers (5)

Kal
Kal

Reputation: 1196

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
       });
    })

Upvotes: 0

anyavacy
anyavacy

Reputation: 1707

$(".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

Upvotes: 4

Jedediah
Jedediah

Reputation: 1944

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);
    });
});

Upvotes: -2

Populus
Populus

Reputation: 7680

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.

Upvotes: 17

Ohgodwhy
Ohgodwhy

Reputation: 50797

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
});

Upvotes: 5

Related Questions