Question

我有一个jquery函数循环遍历xml并在表中显示它并且每行都有按钮，因此用户可以单击它并删除记录。就像我附上的这段代码一样;

$('#btnGetRecords').click(function() {
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/GetRecords',
        data: '',
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(xml) {
            parseXml(xml);
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
});

function DeleteRecord(receiptNo) {
    alert(receiptNo);
    $('#divOutput').html('');
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/DeleteRecord',
        data: 'receiptNo=' + receiptNo,
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(msg) {
            $('#delete_dialog').dialog('open');
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
}

function parseXml(xml) {
    $('#divOutput').html('');
    var x = 1;
    var _html = '<br />';
    _html += '<table id="tblRecords" >';
    $(xml).find('Table').each(function() {
        var fname = $(this).find('FName').text();
        var lname = $(this).find('LName').text();
        var receiptNo = $(this).find('ReceiptNo').text();
        _html += '<tr>';
        _html += '<td>';
        _html += fname + ' ' + lname;
        _html += '</td>';
        _html += '<td>';
        _html += $('<input type="button" class="clsBtnDelete" id="btnDeleteRecord' + x + '" value="Delete" onclick="DeleteRecord(' + receiptNo + ');" />';
        _html += '</td>';
        _html += '</tr>';
        // alert(_html);
        x++;
    });
    _html += '</table>';
    $('#divOutput').append(_html);
}

但由于某种原因，删除按钮不会调用该函数来执行删除。任何想法如何使这工作。谢谢！

-Ryan

Answer 1

将表添加到DOM后添加onclick个事件。类似的东西：

$('#tblRecords .clsBtnDelete').click(DeleteRecord);

让DeleteRecord（）函数从例如＆lt; button＆gt;的id获取ReceiptNo：

使用id="btnDeleteRecord_<ReceiptNo>"
让DeleteRecord()分割_上的id值，并使用第二个（数字）部分

Answer 2

表面看起来很好，但是因为看起来你正在使用ASP.NET我猜测btnGetRecords是一个asp：Button。

查看从服务器获取的HTML，并确保该按钮具有您认为的ID。在ASP.NET中，您通常会在jquery选择器中看到它

$('#<%= btnSomething.ClientID %>')

此外，在IE表格中，行/单元格有时是只读的。

Answer 3

知道了！

function parseXml(xml) { 
    $('#divOutput').html(''); 
    var _html = '<br />'; 
    _html += '<table id="tblRecords" >'; 
    $(xml).find('Table').each(function() { 
        var fname = $(this).find('FName').text(); 
        var lname = $(this).find('LName').text(); 
        var receiptNo = $(this).find('ReceiptNo').text(); 
        _html += '<tr>'; 
        _html += '<td>'; 
        _html += fname + ' ' + lname; 
        _html += '</td>'; 
        _html += '<td>'; 
        _html += '<input type="button" class="clsBtnDelete" id="btnDeleteRecord_' + receiptNo + '" value="Delete" />'; 
        _html += '</td>'; 
        _html += '</tr>'; 
    }); 
    _html += '</table>'; 
    $(_html).appendTo('#divOutput'); 

    $('#tblRecords .clsBtnDelete').click(function() { 
        alert('y');
        var cId = $(this).attr('id'); 
        var arr = cId.split('_'); 
        var receiptNo = arr[1]; 
        DeleteRecord(receiptNo); 
    }); 
}

我将代码块放在解析XML中。谢谢乔尔！

jQuery Button没有执行onclick

3 个答案: