具有X可编辑元素的Bootstrap表，排序时出现问题

Question

Bootstrap Table和X-editable库存在问题，无法进行就地编辑。 我创建了一个简单的例子来描述它。

HTML

<table id="table" class="table" data-toggle="table">
    <thead>
        <tr>
            <th class="col-xs-1" data-field="name" data-sortable="true">Name</th>
            <th class="col-xs-1" data-field="value" data-sortable="true">Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>
                <span id="note1" data-toggle="#edit1">value 1</span>
                <a href="#" id="edit1"><span>edit</span></a>
            </td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>
                <span id="note2" data-toggle="#edit2">value 2</span>
                <a href="#" id="edit2"><span>edit</span></a>
            </td>
        </tr>   
    </tbody>
</table>

的JavaScript

$('#note1').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    title: 'Enter value1', 
    ajaxOptions: {
        dataType: 'json'
    },
    toggle: 'manual',
});

$('#note2').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    title: 'Enter value2', 
    ajaxOptions: {
        dataType: 'json'
    },    
    toggle: 'manual',
});

$('#edit1').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#note1').editable('toggle');
});

$('#edit2').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#note2').editable('toggle');
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
        if(settings.data.value) {
            this.responseText = '{"success": true}';
        } else {
            this.responseText = '{"success": false, "msg": "required"}';
        }
    }
}); 

你也可以在这里找到它： http://jsfiddle.net/xBB5x/9498/

所以，它有两个问题：
1）我可以编辑我的项目，一切正常，直到我使用Bootstrap Table列排序。一旦我对某些内容进行排序 - 我的可编辑元素就变得无法用了 2）如果我将旧值更改为任何新值然后对任何列进行排序 - 我将丢失新值并返回旧值。

有什么想法吗？谢谢！

Answer 1

我有同样的问题，可编辑工作直到排序，使用分页或任何其他有关该表的事件。

最终找到了解决方案here：

您需要将事件委托给表格，'editable'是分配给您的可编辑元素的css类。

$("#table").on("click",".editable",function() {

    $(this).editable();
  //$(this).editable('toggle');

});