Question

昨天我在内联编辑中发布了一个用于添加文本框的代码，我得到了以下正确答案。 https://jsfiddle.net/wjb0an9m/4/

现在，我正在尝试使用ajax调用并从db.But文本框中获取数据，这是多次追加。这是I have one table with 5 rows,When I click edit button in first row text box is appended 5 times similarly when I click edit in second row,Text box is appended 4 times and so on.我不知道我做错了什么。 /> 请任何人让我知道我做错了什么

function empRoles() {
    $.ajax({
        type: 'POST',
        url: "/Admin/getRolesList",
        data:'{}',
        dataType: 'json',
        success: function (response) {
            console.log(response)
            var roleList = response;
            $('#content').html('');
            for (var i = 0; i < roleList.length; i++) {
                var table = '<tr  id="' + roleList[i].Id + '"><td>' + (i + 1) + '</td><td class="roleName" id="name' + i + '"><p>' + roleList[i].name + '</p></td><td><button  class="btn edit btn-info" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger" onclick="deleteRow(this)" data-dismiss="modal" ><i class="fa fa-trash-o"></i>Delete</button></td><tr>';
                $('#content').append(table);
                editUpdate();
            }
        },
        failure: function (response) {
            noData()
        }
    });
}
function noData() {
    $('.noData').show();
}
function editUpdate() {
    $('.update').hide();
    $('.edit').click(function () {debugger

        var editId = $(this).attr('id');
        $(this).parents('tr').find('td.roleName').append('<input>');
        $(this).parents('tr').find('td.roleName > p').hide();
        $(this).parents('tr').find('td.roleName>input').val($(this).parents('tr').find('td.rolename > p').text());
        $("#" + editId).hide();
        var number = editId.replace("edit", "");
        $("#update" + number).show();

        var currentTD = $(this).parents('tr').find(':nth-child(2)');
       //$.each(currentTD, function () {
       //   $(this).prop('contenteditable', true)            
       // });
    });

    $('.update').click(function () {

        var updateId = $(this).attr('id');
        $("#" + updateId).hide();
        var number = updateId.replace("update", "");
        $("#edit" + number).show();

        var currentTD = $(this).parents('tr').find(':nth-child(2)');
        if ($(currentTD).has('input')) {
            $(currentTD).find('p').text($(currentTD).find('input').val());
            $(currentTD).find('input').hide();
            $(currentTD).find('p').show();
        }
        $.each(currentTD, function () {
            $(this).prop('contenteditable', false)
        });

        var id = $(this).closest('tr').attr('id');
        var name = $(this).parents('tr').find(':nth-child(2)').html();
        var Roles = { name: name, role_id: id };
        var ajxObj = { oRoles: Roles };
        $.ajax({
            type: 'POST',
            url: "/Admin/RoleUpdate",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(ajxObj),
            dataType: 'json',
            success: function (response) {
                $(".roleCreated").html("Role Updated successfully!");
                $('.roleCreated').show();
                setTimeout(function () {
                     $('.roleCreated').hide();
                 }, 1500);
                empRoles()
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    });

}

我不会添加已完成的代码，因为它与数据库和控制器连接。这就是我只添加edit和update部分的原因。

Answer 1

您的实现问题在于editUpdate函数中的绑定事件处理程序，因此每当执行该函数时，新的事件处理程序都会附加$('.edit')和$('.update')个元素。 / p>

在动态生成元素时，您应该使用.on()方法和Event Delegation方法。

一般语法

$(document).on('event','selector',callback_function)

相关代码

function editUpdate() {
    $('.update').hide();
}

$('#content').on('click', '.edit', function () {
    //Your existing code
});

$('#content').on('click', '.update', function () {
    //Your existing code
});

另一种方法是使用.off()

function editUpdate() {
    $('.update').hide();
    $('.edit').off('click').on('click', function () {
        //Your existing code
    });

    $('.update').off('click').on('click', function () {
        //Your existing code
    });
}

动态添加输入框以进行内联编辑

1 个答案: