CODEWITHSUNDEEP
javascriptjquerybutton
z22
z22

Reputation: 10083

jquery dynamic button click not working

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");
                       });

Upvotes: 1

Views: 112

Answers (6)

Rohit416
Rohit416

Reputation: 3486

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.

Upvotes: 0

Abhishek Verma
Abhishek Verma

Reputation: 489

**.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/

Upvotes: 0

ThiagoPXP
ThiagoPXP

Reputation: 5462

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.

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Use 

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

});

Upvotes: 1

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this for dynamically created buttons

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

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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(){

Upvotes: 2

Related Questions