Question

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

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

Answer 1

在$('#addrow').click(function() {});中，我想补充一下：

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

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

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

添加的新行无法编辑

1 个答案: