数据表的 X 可编辑问题

Question

我在其单元格上加载了 Ajax Datatable and I would like to use x-editable。我已经尝试过简单的方法，就像示例中的那样：

$('a.editable').editable({
    type: 'text',
    pk: 1,
    name: 'nome',
    url: 'post.php',
    title: 'Edit name'
});:

基本 link 里面 <td> 像：

<a href='#' class='editable'>Name</a>

但它不起作用。我发现让它起作用的唯一方法是：

$(document.body).on('click', 'a.editable', function(e){
    $(this).editable('toggle');
});

与 html:

<a href="javascript:;" class="" data-pk="id1" data-name="nome" data-type="text" data-url="post.php" data-title="Edit name">Name</a>

现在可以用了，但只是第一次，然后它的边框底部变成了虚线，就没有了 clickable/editable。

有没有办法在 DataTables 单元格内的元素上绑定事件？

Answer 1

我终于解决了我的问题。仔细阅读文档：

How to toggle editable. Can be click|dblclick|mouseenter|manual.
When set to manual you should manually call show/hide methods of editable.
Note: if you call show or toggle inside click handler of some DOM element, you need to apply e.stopPropagation() because containers are being closed on any click on document.

示例：

$('.editable').click(function(e) {
    e.stopPropagation();
    $(this).editable('toggle');
});

但这还不足以解决我的问题，我还不得不从使用 'toggle' 更改为 'show'，但我仍然不明白为什么它比其他选项更好.我注意到使用 'toggle' 时，第二次单击会快速添加和删除可编辑的弹出窗口，但为什么呢？如果有人有任何想法..

数据表的 X 可编辑问题

X-Editable issue with DataTables

datatables

twitter-bootstrap

x-editable