javascript - Unable to select the newly add button -
i have table default of 4 rows user input. please see fiddle here http://jsfiddle.net/xakxm/4/ when user click on "add more
", table add new row "labeltable
" unique id, "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" pressed, user can see description , "activate
" button in configtabletable
. in order make sure activate
button useful, append thisindex
paragraph #ptest
. works first 4 default rows not work newly added rows (5 onwards). what's wrong logic , code?
solved: creating class "switch
" , 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"}); });
there 2 errors
1.in generated code "addmore", should following code button
id="switch_' + currentindex + '"
2.after creating new buttons, have add click event them. suggest following code
$('#configsubmit').click(function () { (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" }); });
Comments
Post a Comment