javascript - 添加的新行无法编辑

Question

我正在使用 codeigniter 和 bootstrap-editable.js 等作为插件。我制作了一个包含空值的可编辑表格。如果用户想要添加新行，我只显示一行并制作一个添加行按钮。 addnew 按钮有一个 mouseclick 事件，它会自动添加一个空的新行。我希望新添加的行也可以编辑。但是在我的案例/代码中，它不起作用。

这是我的代码:

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

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

Answer 1

在您的 $('#addrow').click(function() {}); 中，我将添加:

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

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

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