Jquery 具有X-可编辑元素的引导表，排序时出现问题

我对用于就地编辑的引导表和X-editable库有问题。 我创建了一个简单的例子来描述它

HTML 你也可以在这里找到它：

因此，它有两个问题：
1） 我可以编辑我的项目，在使用引导表列排序之前，一切都可以。一旦我对某些内容进行排序，我的可编辑元素将变得不可编辑。
2） 如果我将旧值更改为任何新值，然后对任何列进行排序，我将丢失新值，旧值将重新显示

---

有什么想法吗？谢谢大家!

我也遇到了同样的问题，在排序之前都是可编辑的，使用分页或与表相关的任何其他事件

最终找到了解决方案：

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

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

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

});

$('#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"}';
        }
    }
}); 

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

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

});