添加的新行无法编辑

Question

我正在使用 codeigniter 和 bootstrap-editable.js 等作为插件。我用空值制作了一个 editable table 。如果用户想要添加新行，我只显示一行并制作一个添加行按钮。 addnew 按钮有一个 mouseclick 事件，它会自动添加一个空的新行。我也希望新添加的行是 editable.. 但是就像在我的 case/code 中一样，它不起作用..

这是我的代码：

<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>');
});

如何使新添加的行成为 editable？请帮帮我..

Answer 1

在你的 $('#addrow').click(function() {}); 中，我要添加：

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

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

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

添加的新行无法编辑

New row added can't be edited

javascript

jquery

html-table