动态添加元素上的 X-Editable 引导插件“隐藏”事件问题

Posted 2023-05-08

【中文标题】动态添加元素上的 X-Editable 引导插件“隐藏”事件问题

【英文标题】：X-Editable bootstrap plugin "hidden" event issue on dynamically added elements

【发布时间】：2015-07-27 07:24:51

【问题描述】：

我无法让 x-editable 的“隐藏”事件通过 JS 处理动态添加的类（或字段）。只有当我直接在 html 上添加可编辑类时，我才能让它工作，但这种方法不适合我。我做错了什么？

$.fn.editable.defaults.mode = "inline";
$.fn.editable.defaults.onblur = "submit";

$(document).ready(function () 
    $('.field').each(function() 
        $(this).addClass('editable');
    );
    $('.editable').editable();
);

$(document).on('hidden', '.editable', function(e, params) 
    alert('was hidden!');
);

小提琴：http://jsfiddle.net/4vj8buks/17/

【参考方案1】：

您可以像这样挂钩可编辑的隐藏事件：

$.fn.editable.defaults.mode = "inline";
$.fn.editable.defaults.onblur = "submit";

$(document).ready(function () 
    $('.field').each(function() 
        $(this).addClass('editable');
    );

    $('.editable').editable().on('hidden', function (e, params) 
        alert('was hidden!');
    );
);

【参考方案2】：

我认为接受的答案并不能真正解决问题。

隐藏事件不会冒泡到文档级别。要解决此问题，我必须添加代码以在任何插入元素的地方再次设置事件（在我的情况下只有一个地方）。

请参阅此处了解有关此问题的讨论，尽管不是很有帮助。 https://github.com/vitalets/x-editable/issues/86