jquery dynamic button click not working

Question

I am generating some buttons dynamically with dynamic ids. I wish to handle each button's click based on its id. But that's not working.

Following is my code:

var del_id = "del"+countPage+"-"+questionCount;
 html+='<tr><td><input type="button" value="delete" id="'+del_id+'" /><td><input type="button" value="Copy" id="copy_id"/></tr>';
        $("#"+del_id).click(function(){
                                alert("jkhkjh");
                              });

If I give static id instead of del_id, then it works. Where am I getting wrong? How do I solve this?

edited:solved

html+='<tr><td id="'+del_id+'"><input type="button" value="delete" id="'+del_id+'" /><td><input type="button" value="Copy" id="copy_id"/></tr>';


        $(document).on("click", "#"+del_id, function(){
                       alert("jkhkjh");
                       });

Rajaprabhu Aravindasamy · Accepted Answer · 2014-03-19 05:26:15Z

2

You have to use Event-delegation to hook the events with elements which are loaded dynamically.

Try,

  $(document).on("click", "#"+del_id, function(){

Or try like this, dont register events for each and every buttons since they are performing the same task.

  $(document).on("click", "[type='button'][id^='del']", function(){

Or add a common class to that button element and try like this,

  $(document).on("click", ".buttonClass", function(){

answered Mar 19, 2014 at 5:26

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

5 Comments

z22 Over a year ago

this works but I get the alert 2 times. Any idea? I just want the alert one time

Rajaprabhu Aravindasamy Over a year ago

@z22 which method you had adopted for your code..?\

z22 Over a year ago

$.on(click)- the one you suggested

z22 Over a year ago

i have included the solved code in my question edit- please review

Rajaprabhu Aravindasamy Over a year ago

@z22 Please note that Id must be unique.. You have assigned saeme id for two elements in your code.. Just change that as a class.

Rakesh Kumar · Accepted Answer · 2014-03-19 05:26:46Z

1

Try this for dynamically created buttons

$(document).on('click', 'buttonId/Class', function(){
   // Do something.
})

answered Mar 19, 2014 at 5:26

Rakesh Kumar

2,8631 gold badge22 silver badges37 bronze badges

2 Comments

z22 Over a year ago

this works but I get the alert 2 times. Any idea? I just want the alert one time

Rakesh Kumar Over a year ago

you are using same id on two element, on td and input too. Id should be unique on the page.

Sridhar R · Accepted Answer · 2014-03-19 05:26:57Z

1

Use

$(document).on("click", "#"+del_id, function(){

});

answered Mar 19, 2014 at 5:26

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

2 Comments

z22 Over a year ago

this works but I get the alert 2 times. Any idea? I just want the alert one time

Sridhar R Over a year ago

your td id and input id is same so only you get 2 alerts change this

ThiagoPXP · Accepted Answer · 2014-03-19 05:27:43Z

0

You are giving the same id to 2 different DOM elements (TD and input). Id's are supposed to be unique.

jQuery then gets only the first DOM element that it finds.

answered Mar 19, 2014 at 5:27

ThiagoPXP

5,4823 gold badges34 silver badges45 bronze badges

Comments

Abhishek Verma · Accepted Answer · 2014-03-19 05:50:48Z

0

**.live()** - This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page.

$( "#dymanic" ).live( "click", function() { alert( "Goodbye!" ); // jQuery 1.3+ });

Refer to this documentation

https://api.jquery.com/live/

answered Mar 19, 2014 at 5:50

Abhishek Verma

4894 silver badges10 bronze badges

Comments

Rohit416 · Accepted Answer · 2014-03-19 05:56:09Z

if your controls are being added dynamically on page, they should be handled with special events that take future events into account. like on() or delegate().

I will prefer delegate() as I used it numerous times.

$('body').on("#"+del_id, 'click', function(){
   //Do something.
});

Note: with delegate() or on() you have an advantage of attaching multiple events handlers and make your selector search faster as you can specify the parent element to search within. In this case I mentioned body as parent selector. you can specify a more closer parent node.

Collectives™ on Stack Overflow

jquery dynamic button click not working

6 Answers 6

5 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Related