Unable to select the newly add button

Question

I have a table with a default of 4 rows for user to input. please see the fiddle here http://jsfiddle.net/xaKXM/4/ When the user click on "Add More", the table will add new row to the "labelTable" with unique ID, as well as "configtableTable".

var displaymore = '<tr id=row'+currentIndex+'><td style="text-align: center">'+currentIndex+'</td>'+
    '<td width="60%"><p id="label_row_'+currentIndex+'"></p></td>'+
    '<td><button type="button" class="switch" id="switch_'+currentIndex+'"data-role="button" data-transition="fade">Activate</button></td></tr>';

When button "Submit" is pressed, user can see the description and the "Activate" button in the configtableTable. In order to make sure the Activate button is useful, i append thisIndex to a paragraph #ptest. It works for the first 4 default rows but does not work for the newly added rows (5 onwards). What's wrong with my logic and code?

SOLVED: by creating a class "switch" and use .on()

 $("#configtableTable").on('click', ".switch", function () {
        thisIndex= $('td:nth(0)',$(this).closest('tr')).text();
        if(thisIndex == ""){thisIndex = 0;}
        $('#ptest').append(thisIndex);
        $.post('/request', {responseNumber:$('#number_'+thisIndex).val(), key_pressed:"activate"});
    });

try changing $("#configtableTable [id^='switch_']:button").click(function () { to $("#configtableTable [id^='switch_']:button").on("click",function () { — Bojan Kovacevic, May 13 '13 at 06:54
and generally, use on when working with dinamically added content. — Bojan Kovacevic, May 13 '13 at 06:55
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Ram, May 13 '13 at 06:57
there is no id like switch_* in dynamically added elemnts or Activate button — Gopesh, May 13 '13 at 07:02
@BojanKovacevic thank you! i use a class now and it works with .on — yvonnezoe, May 13 '13 at 07:13

score 0 · Answer 1 · answered May 13 '13 at 07:18

there are two errors

1.In the generated code for "addmore", it should be following code for button

id="switch_' + currentIndex + '"

2.After creating new buttons, you have to add the click event for them. I suggest the following code

$('#configsubmit').click(function () {

for (var x = 1; x <= currentIndex; x++) {
    $('#label_row_' + x).html($('#label_' + x).val());
}
$('#configtable').show();
$("#configeditdiv").show();
$('#labels').hide();

$("#configtableTable [id^='switch_']:button").unbind('click');
$("#configtableTable [id^='switch_']:button").click(function () {        
    thisIndex = $('td:nth(0)', $(this).closest('tr')).text();
    if (thisIndex === "") {
        thisIndex = 0;
    }
    $('#ptest').append(thisIndex);
    $.post('/request', {
    responseNumber: $('#number_' + thisIndex).val(),
    key_pressed: "activate"
    });
});

Unable to select the newly add button

1 Answers1