2

我有一个默认为 4 行的表格供用户输入。请在此处查看小提琴http://jsfiddle.net/xaKXM/4/ 当用户单击“ Add More”时，表格将在“”中添加labelTable具有唯一 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>';

当按下“提交”按钮时，用户可以在 中看到描述和“ Activate”按钮configtableTable。为了确保Activate按钮有用，我附加thisIndex了一个段落#ptest。它适用于前 4 个默认行，但不适用于新添加的行（5 起）。我的逻辑和代码有什么问题？

已解决：通过创建一个类“ switch”并使用.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"});
    });
4

1 回答 1

0

有两个错误

1.在“addmore”生成的代码中，应该是下面的按钮代码

id="switch_' + currentIndex + '"

2.创建新按钮后，您必须为它们添加点击事件。我建议以下代码

$('#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"
    });
});
于 2013-05-13T07:18:33.997 回答