Click function for generated element in JQuery

Question

I have a delete button. When clicking on the button, I want to generate a second button to confirm that the user really wants to delete something. BUT: When clicking on the second button, the $('.deleteConfirmed').click(function() { does not trigger.

I'm not exactly sure how JQuery works, but my guess is that this happens because the click listener was created before the second button existed, correct? If that is true, what would be a solution to make clicking the second button call deleteEntityConfirmed(id)?

I guess you could probably do it with HTML's onclick attribute on the second button, but does JQuery offer a more elegant solution for this scenario?

Here is some code showing my scenario, I tried to keep only relevant parts in.

HTML:

<button class="delete" data-id="5">
  Delete
</button>

<div id="somewhere"></div>

JS:

$(function() {
  $('.delete').click(function() {
    var id = $(this).data('id');
    $('#somewhere').empty().append('<button class="deleteConfirmed" data-id="' + id + '">I\'m sure I want to delete</button>');
  });


  $('.deleteConfirmed').click(function() {
    alert("debug message"); // we don't get here when clicking the second button. It seems to not be listening to it
    var id = $(this).data('id');
    deleteEntityConfirmed(id);
  });

});

function deleteEntityConfirmed(id){
    // If we'd get here after clicking the second button, this would be full success
    alert("Deleting id " + id);
}

The element is created dynamically, you have to delegate the event. `$(document).on("click", ".deleteConfirmed", function() { ... });` — Sterling Archer, Mar 24 '17 at 16:49
[Delegated Events](http://api.jquery.com/on/#direct-and-delegated-events) — hungerstar, Mar 24 '17 at 16:50

score 1 · Accepted Answer · answered Mar 24 '17 at 16:50

1

You have to do event delegation. Use on() for dynamically generated elements.

$(document).on("click", ".deleteConfirmed", function() {
    var id = $(this).data('id');
    $('#somewhere').empty().append('<button class="deleteConfirmed" data-id="' + id + '">I\'m sure I want to delete</button>');
  });

Read more http://api.jquery.com/on/

answered Mar 24 '17 at 16:50

Suresh Atta

120,458
37
198
307

1

Wrong function for the confirmation. `.delete` calls this. Also, this question is without a doubt a duplicate, you may want to vote to close. – Sterling Archer Mar 24 '17 at 16:52
Best to also clear out the old events with `unbind` before re-applying DOM-wide. – G0dsquad Mar 24 '17 at 16:54
Thanks, with `on()` it works perfectly fine. I'll give the documentation a read on that method :) – user2015253 Mar 24 '17 at 17:00
@G0dsquad The documentation says that `unbind()` is deprecated. I'll give `off()` a read though, thanks for the hint! – user2015253 Mar 24 '17 at 17:01

Click function for generated element in JQuery

1 Answers1