How to react on the dynamically generated button click?

Question

I add the button with the following code:

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));

But the following code doesn't catch the button click (when it works with the same code if it is part of the static html):

$("button.close").click(function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
});

How can I fix that?

See the sample code.

It's obviously a duplicate and should be closed.

u_mulder
– u_mulder

2016-04-01 21:03:02 +00:00
Commented Apr 1, 2016 at 21:03 — u_mulder
– u_mulder, Commented Apr 1, 2016 at 21:03

Ibrahim Khan · Accepted Answer · 2016-04-06 07:01:17Z

3

You need event delegation for dynamically generated element. Try like following.

$(document).on('click', "button.close", function () {
    var row = $(this).closest('.row');
    var dishid = row.attr('data-dishid');
    console.log(dishid);
});

WORKING DEMO

answered Apr 6, 2016 at 7:01

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YSJ · Accepted Answer · 2016-04-06 15:21:32Z

3

For dynamically created elements, you should use .on('click', selector, callback)

like

$(document).on("click", "button.close", function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');      
});

edited Apr 6, 2016 at 15:21

answered Apr 1, 2016 at 21:02

YSJ

3922 silver badges14 bronze badges

2 Comments

LA_ Over a year ago

Thanks! I've edited my question - looks like the problem not only with reacting on 'click' event, but also with getting element's attribute.

YSJ Over a year ago

@LA_ You also need to bind button.close with on

Ibrahim Khan · Accepted Answer · 2016-04-08 08:26:05Z

1

+50

I have seen the code. You have to call the click function of the dynamic element immediately after the element appended. Try the code below.

$("#add").on('click', function() {
    $('.dishes').prepend($('<div class="row" data-dishid="'+ "test" +'"><div class="col-md-8">'+ " test " +'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));
    $("button.close").on('click', function() {
        var row = $(this).closest('.row');
        var dishid = row.attr('data-dishid');      
        console.log(dishid);
    });
});

edited Apr 8, 2016 at 8:26

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

answered Apr 7, 2016 at 10:42

Karthikeyan

3473 silver badges8 bronze badges

Comments

Kaushal Shah · Accepted Answer · 2016-04-01 21:02:33Z

0

$("button.close").on("click", function(){
   console.log('ok');
});

You need to use on() function for dynamically generated html elements

answered Apr 1, 2016 at 21:02

Kaushal Shah

857 bronze badges

Comments

Sebsemillia · Accepted Answer · 2016-04-01 21:38:54Z

0

try:

$("button.close").on("click", function() {
  console.log('ok');
});

You need the .on event handler for dynamically created DOM elements.

UPDATE:

you don't need to put jQuery $ before the content of the prepend. Here is a working fiddle with your code.

https://jsfiddle.net/3k7Laohn/

edited Apr 1, 2016 at 21:38

answered Apr 1, 2016 at 21:02

Sebsemillia

9,4863 gold badges58 silver badges72 bronze badges

1 Comment

LA_ Over a year ago

Thank you. I use $ because I also animate the element addition (what I've removed from my sample code). But it really doesn't affect how it works. But your code doesn't work with my code, since I add the element on button click and not during page load - jsfiddle.net/3k7Laohn/1

Jeramiah Harland · Accepted Answer · 2016-04-06 14:10:50Z

Here is your updated code.

I changed:

$("button.close").click(function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
});

To:

$(".dishes").on('click', 'button.close', function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
      console.log(dishid);
});

This question is answered all over the internet and here is a snippet from jQuery's site:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). Alternatively, use delegated events to attach event handlers.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Source

Arnel Aves · Accepted Answer · 2016-04-07 14:06:45Z

Upon checking your code, the click event should be working fine. Maybe the problem relies on the timing. My assumption is if you have the code below:

$("button.close").click(function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');
});

You haven't appended the object yet on the DOM. Everytime you call the method below, you have to immediately bind the click event. Best is to have the codes together to check if it will work.

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));
$("button.close").click(function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');
});

Collectives™ on Stack Overflow

How to react on the dynamically generated button click?

7 Answers 7

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related