Javascript 新增一行can'；不可编辑

我使用codeigniter和bootstrap editable.js等作为插件。我制作了一个带有空值的可编辑表。如果用户想添加新行，我只显示了一行，并创建了一个addrow按钮。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>');
});

$.fn.editable.defaults.mode='inline'；
$.fn.editable.defaults.showbuttons=false；
$.fn.editable.defaults.url='/post'；
$.fn.editable.defaults.type='text'；
//使所有具有“编辑”类的项目都可编辑
$（'.edit'）.editable（）；
//ajax仿真
$.mockjax({
url:“/post”，
答复时间:200,，
响应：功能（设置）{
console.log（'done！'）；
}
}); 
//这将自动使表中的下一项可编辑
$（'.edit'）。在（'save'，函数（e，参数）上{
var=这个；
//单击“重置”时，在要恢复的元素中保留旧值
var oldItemValue=$（即[0]）；
if（！$（that）.attr（'oldValue'））{
log（'持久化原始值：'+oldItemValue）
$（即）.attr（'oldValue'，oldItemValue）；
}
setTimeout（函数（）{
//首先搜索该行
var item=$（that）.closest（'td'）.next（）.find（'.edit'）；
控制台日志（项目）；
如果（item.length==0）{
//检查下一行
item=$（that.closest（'tr'）.next（）.find（'.edit'）；
}
项目。可编辑（“显示”）；
}, 200);
});
$（'#addrow'）。单击（函数（）{
$（'#memberTB>tbody:last'）。追加（''）；
});

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

在您的

$（'#addrow'）中。单击（function（）{}），我将添加以下内容：

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

fn1
和
fn2
是已绑定到
edit
类的任何函数（即可编辑和打开）

这会将函数重新绑定到所选元素，但首先会删除绑定，这样元素就不会得到双重（或三重等）绑定。
谢谢您的想法。。它起作用了。我将功能
fn1、fn2
和
off
更改为
editable
。。