Question

I have a web application that loads javascript on page load:

$(function() {
  $('.modal-delete').click(function() {
    alert();
  });
});

I have a html page with a series of buttons which alert a blank message box when they’re clicked:

<button class="modal-delete btn danger"></button>

which works fine.

However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they’re meant to load the alerts. They’re identical but because they never existed on page load, the Jquery code doesn’t work on these buttons. How do I attach the same code to these buttons too?

Many thanks :).

Answer 1

I think you’ll want jQuery’s ‘live()’ function:

$('.modal-delete').live('click', function() { 
  alert(); 
}); 

This binds to the elements which match but also rebinds when new elements are added in the future:

“Attach an event handler for all elements which match the current selector, now and in the future”