Jquery Not Detecting Clicks On Dynamically Inserted Element

I have the following modal:

Solution 1:

The code:

$('#killgroup').click(function(){ ... });

...says to find an element with id 'killgroup' which exists at the moment that code runs and then assign a click handler to that element.

In your case of course the element doesn't exist yet. The two usual ways to make it work are to either move the .click() call to just after the code that creates the element (in your Ajax callback) or to use a delegated click handler bound to a parent element that does exist at the time (or bound to the document if there is no parent element):

$('.modal-content').on('click', '#killgroup', function() {
   alert('made it');
});

That variation of the .on() method will bind the handler to the element(s) in the jQuery object - in this case I've used '.modal-content' because you know that exists at the start - and then when a click occurs jQuery automatically tests whether the click originated in a child of that element that matches the selector in the second argument, '#killgroup'.

Solution 2:

Just use the .on() function for dynamically loaded elements...

The problem is you're assigning a click handler to a non existant element.

This will fix your issue.....

$(document).on('click','#killgroup',function(){
   alert('made it');
 });

It used to be the .live() function, but that was deprecated. .on() should do the trick

Share