DataTables的X-Editable问题

Question

我加载了一个Ajax Datatable，我希望在其单元格上使用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单元格内的元素上绑定事件？

Answer 1

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

  

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

示例：

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

但这还不足以解决我的问题，我也不得不改变使用＆＃39; toggle＆＃39;要显示＆＃39;，但我仍然无法理解为什么它比其他选项更好。我注意到，用'切换＆＃39;第二次单击quicly添加并删除可编辑的弹出框，但为什么？如果有人有任何想法..