无法编辑添加的新行

New row added can't be edited

本文关键字：新行 添加 编辑      更新时间：2023-09-26

我正在使用codeigniter和bootstrap-editable.js等作为插件。我用空值制作了一个可编辑的表。我只显示一行，如果用户想要添加新行，我创建了一个添加按钮。addnew 按钮有一个鼠标单击事件，它会自动添加一个空的新行。我希望新添加的行也是可编辑的。.但就像我的情况/代码一样，它不起作用。

这是我的代码：

<table class="table " id="memberTB">
    <thead><tr><th >First Name</th><th >Middle Name</th><th>Last Name</th></tr></thead>
    <tbody>
                   <tr><td><span class="edit"></span></td>
                   <td><span class="edit"></span></td>
                   <td><span class="edit"></span></td></tr>
    </tbody>
     <button type="button" class="btn btn-link" id="addrow"><span class="fa fa-plus"> Add new row</span></button>
</table>

这是Javascript代码：

$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.showbuttons = false;
$.fn.editable.defaults.url = '/post';
$.fn.editable.defaults.type = 'text';
// make all items having class 'edit' editable
$('.edit').editable();

//ajax emulation
$.mockjax({
url: '/post',
responseTime: 200,
response: function(settings) {
    console.log('done!');
    }
}); 
// this is to automatically make the next item in the table editable
$('.edit').on('save', function(e, params){
var that = this;
// persist the old value in the element to be restored when clicking reset
var oldItemValue = $(that)[0].innerHTML;
if (!$(that).attr('oldValue')) {
    console.log('persisting original value: ' + oldItemValue)
    $(that).attr('oldValue', oldItemValue);
}
setTimeout(function() {
    // first search the row
    var item = $(that).closest('td').next().find('.edit');
    console.log(item);
    if (item.length == 0) {
        // check the next row
        item = $(that).closest('tr').next().find('.edit');
    }
    item.editable('show');
    }, 200);
});
$('#addrow').click(function() {
$('#memberTB > tbody:last').append(' <tr><td><span class="edit"></span></td><td><span class="edit"></span></td><td><span class="edit"></span></td></tr>');
});

如何使新添加的行可编辑？请帮助我..

在您的$('#addrow').click(function() {});中，我会添加以下内容：

$('.edit').off();
$('.edit').fn1();
$('.edit').fn2();

fn1和fn2是已经绑定到edit类的任何函数（即 .editable 和 .on）

这会将函数重新绑定到所选元素，但首先删除绑定，以便元素不会获得双重（或三重等）绑定。

相关文章：