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:
Question is:
How to make use of buttons inside table cells correctly so that each of them function independently?