带有 X 可编辑元素的引导表，排序时出现问题答案

【问题标题】：Bootstrap Table with X-editable elements, problems while sorting带有 X 可编辑元素的引导表，排序时出现问题
【发布时间】：2015-09-22 14:02:31
【问题描述】：

我在使用 Bootstrap Table 和 X 可编辑库进行就地编辑时遇到问题。我创建了一个简单的例子来描述它。

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) 如果我将旧值更改为任何新值，然后对任何列进行排序 - 我会丢失新值并且旧值会重新出现。

有什么想法吗？谢谢！

【问题讨论】：

标签： jquery twitter-bootstrap jsfiddle x-editable bootstrap-table

【解决方案1】：

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

终于找到了解决办法here：

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

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

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

});

【讨论】：