Question

我已经动态创建了表格。有一个＆＃34;更新＆＃34;该表的每一行上的链接。当我点击该链接时，一切正常，但我在控制台网络（F12）中看到它生成多个ajax请求而不是一个（同一个请求被多次发送）。您能否查看下面的代码并帮我解决问题。

$('#load_table').click(function() {
    $.get('cont/get_table', function (data) {

        var item = $('<table>');

        $.each(data.results, function (i, res) {

            var row = $('<tr>').append(
            $('<td class="a">').html(res.id),
            $('<td class="b" contenteditable="true">').html(res.title),
            $('<td class="c" contenteditable="true">').html(res.text),
            $('<td>').html('<a href="#" class="update">Update</a>'));
            item.append(row);
        });

        $("#display").html(item);

        $("body").on("click", ".update", function () {

            var row = $(this).closest('tr'); 
            var id = row.find('td.a').text();
            var title = row.find('td.b').text();
            var text = row.find('td.c').text();

            $.post('cont/update_row', {
                id: id,
                title: title,
                text: text
            }, function (data) {

                //display data
            });
        });
    });
});

Answer 1

基本错误：您有几个id =“update”的元素。把它改成上课。

    $.each(data.results, function (i, res) {

    var row = $('<tr>').append(
    $('<td class="a">').html(res.id),
    $('<td class="b" contenteditable="true">').html(res.title),
    $('<td class="c" contenteditable="true">').html(res.text),
    $('<td>').html('<a href="#" class="update">Update</a>'));
    item.append(row);

    row.on('click', '.update',function(){
    $.post('cont/update_row', {
        id: res.id,
        title: res.title,
        text: res.text
    }, function (data) {

        //display data
    });
});


$("#display").html(item);

第二种方法 - 在你的ajax调用之外移动该函数，每次调用时都会使用另外一个事件来添加另一个事件。

$("body").on("click", ".update", function () {
        var row = $(this).closest('tr'); 
        var id = row.find('td.a').text();
        var title =  row.find('td.b').text();
        var text =  row.find('td.c').text();

        $.post('cont/update_row', {
            id: id,
            title: title,
            text: text
        }, function (data) {

            //display data
        });
    });

Answer 2

您使用相同的<a>创建多个id='update'链接，这是不正确的，可能会生成此错误。请尝试更改为class='update'。

相同的jquery ajax请求被多次发送

2 个答案: