2

In my HTML page I have a button in each row in a particular column. User may add new rows at runtime and these buttons are also inserted alongwith rest of the fields in each row.

The buttons are being appended using the following:

function funcAddBtnOpenPad() {   // This funct being called at page onload
// VARS FOR ADDING BUTTON IN CELL "5"
// STORING BUTTON ATTRIBUTES
var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad', name:'btnOpenPad', value:'OpenPad' });

$('#childTable tr').each(function(tempRowIdx) {
    
// CONSTRUCT TAG FOR BUTTON "OpenPad" IN CELL "5"
    tempButtonCellTag = 'id_tIndx'+tempRowIdx+5;

// HERE WE ARE INSERTING THE BUTTON "OpenPad" <<<<
        $('#'+ tempButtonCellTag).append(btnOpenPad);
        $(this).find("input[type='button']").attr('id', 'idBtnOpenPad'+tempRowIdx);
});
}

However I find that only the first button is working when used in .on('click') function (as in the following):

$(function() {
    $('#idBtnOpenPad1').on('click', function() {
        alert("OpenPad clicked");
    });
});

I have tried to (manually) change the button to #idBtnOpenPad2 or #idBtnOpenPad3 etc, but it does not fire at all.

To get clarity, I am reproducing partial image of the table here:

enter image description here

Question is:

How to make use of buttons inside table cells correctly so that each of them function independently?

shaan
  • 211
  • 10
  • 1
    use `$(document).on("click","yourbuttonclass",function(){//your code})` .Also have a look at [this](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) post. – Swati Oct 08 '20 at 03:52
  • @Swati : Thanks. It works. Could you please give me a headup on **Though bear in mind document may not be the most efficient option.** as stated in the link you have posted? If I were to use another object, what would that be? I tried the table `id` in place of `document` and it still works. I will need to spend some time on this, I believe. **PS.** You may like to post this (your comment) as answer to my query. – shaan Oct 08 '20 at 04:40
  • Hi, elements which are not dynamically generated in your code you can use that elements instead of `document` , i.e : your table ,body ,some div etc. – Swati Oct 08 '20 at 04:44
  • 1
    @Swati : Thanks. Missed it completely, as it clearly states: _(The event is attached to a static parent (staticAncestors) of the element that should be handled.)_, in the very opening para. – shaan Oct 08 '20 at 04:48
  • @Swati - I wanted to close the question but not sure if I should post the solution as my **answer** as the direction came from you. Could you please help me by posting your solution as the answer so that I may close it. Thanks. – shaan Oct 09 '20 at 04:35
  • Hi, you can answer your own question :) – Swati Oct 09 '20 at 04:39

1 Answers1

0

As suggested by @Swati, now instead of id, I am using class like this (method 1):

$(document).on('click', '.clsBtnOpenPad', function() {
    ...
});

Alternatively we may also use this (method 2):

$('#childTable').on('click', '.clsBtnOpenPad', function() {
    ...
});

Both work. Why was it not working earlier? Because I was trying to bind event to an element generated dynamically. Check for a detailed explanation here.

Also, using the second method is better as explained here.

shaan
  • 211
  • 10