Question

我有一个默认为4行的表供用户输入。请看这里的小提琴http://jsfiddle.net/xaKXM/4/ 当用户点击“Add More”时，该表格会将新行添加到具有唯一ID的“labelTable”，以及"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"});
    });

Answer 1

有两个错误

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

的代码

id =“switch_'+ currentIndex +'”

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

$('#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"
    });
});

无法选择新添加按钮

1 个答案: