Search code examples
jqueryhtmlajaxmutation-observers

use MutationObserver to make jQuery recognize attribute of new button (inserted via ajax)

I am trying to trigger an event when clicking on buttons that get inserted via ajax into a div. My buttons have the class btn.

The code below works only on buttons that were already in the DOM:

$('.btn').click(function(){
    alert('It works!');
});

I am using the MutationObserver example from MDN to recognize a new child node has been made to my div and I do get a response in my console with: A child node has been added or removed.

How to make jQuery also recognize this child node and its attributes so i can trigger events with my inserted buttons?

Solution

  • As stated by wOxxOm I had to use event delegation in order to make it work.

    $('#divID').on('click','.btn', (function(){
    alert('It works!');
});