DataTables 的 X 可编辑问题答案

【问题标题】：X-Editable issue with DataTablesDataTables 的 X 可编辑问题
【发布时间】：2015-01-19 15:58:21
【问题描述】：

我有一个加载了 Datatable 的 Ajax，我想在其单元格上使用 x-editable。我已经尝试过简单的方法，就像在示例中一样：

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

在<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>

现在它可以工作了，但只是第一次，然后它得到虚线边框底部，它不再是可点击/可编辑的。

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

【问题讨论】：

标签： twitter-bootstrap datatables x-editable

【解决方案1】：

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

如何切换可编辑。可以click|dblclick|mouseenter|manual。
当设置为手动时，您应该手动调用可编辑的显示/隐藏方法。
注意：如果您在某些 DOM 元素的点击处理程序中调用 show 或 toggle，您需要应用 e.stopPropagation()，因为容器会在任何点击文档时关闭。

例子：

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

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

【讨论】：