Dynamic Button Script not working

Question

I created a dynamic button in html table using java script. Code is in this way

                                        $('#dataTables-data').empty();

                                        jQuery.each(searchTO, function(i, item) {

                                            historyrowid += '<tr><td style="    border: 1px solid black;">' + Math.round(item.SNo * 100) / 100+ 
                                                            '</td><td style="    border: 1px solid black;">' +Math.round( item.DistributorId* 100) / 100 + 
                                                            '</td><td style="    border: 1px solid black;">' +item.DistributorName+     
                                                            '</td><td style="    border: 1px solid black;">' +item.Bonuspercent +   
                                                            '</td><td style="    border: 1px solid black;">' +Math.round( item.PrevCumPV * 100) / 100+  
                                                            '</td><td style="    border: 1px solid black;">' + Math.round(item.exclpv* 100) / 100 +     
                                                            '</td><td style="    border: 1px solid black;">' + Math.round(item.SelfBV * 100) / 100+     
                                                            '</td><td style="    border: 1px solid black;">' + Math.round(item.grouppv * 100) / 100+ 
                                                            '</td><td style="    border: 1px solid black;">' + Math.round(item.Totalpv * 100) / 100+                                                    
                                                            '</td><td style="    border: 1px solid black;">' + Math.round(item.totalBv * 100) / 100+    
                                                            '</td><td  style="    border: 1px solid black;"><button type="button" class="Downline_button"   id="'+item.DistributorId+'" >Downline</button></td></tr>';
                                        });

                                     $('#dataTables-example').append(historyrowid);

and created table is this

But when i create an event on this button nothing is happen.. My event code on button is like this

   $(".Downline_button").click(function(){
            debugger;
            var id = this.id;
            });

so please tell me how can i create an event on dynamic button and how can i read button ID ??

well are you binding the event before the elements are added? `console.log( $(".Downline_button").length)` — epascarello, Dec 29 '17 at 19:18

score 1 · Answer 1 · answered Dec 29 '17 at 19:17

1

You will need to attach the event handler to the document and delegate the event to the element.

You can do something like this:

$(document).on('click', '.Downline_button', function(){
            debugger;
            var id = this.id;
});

This will apply to all the elements with this id regardless of whether they are created before document.ready() or not.

answered Dec 29 '17 at 19:17

haxtbh

3,302
1
19
22

Uncaught TypeError: $(...).on is not a function – Sanjog Mittal Dec 30 '17 at 06:22

Dynamic Button Script not working

1 Answers1