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

【问题标题】：X-Editable bootstrap plugin "hidden" event issue on dynamically added elements动态添加元素上的 X-Editable 引导插件“隐藏”事件问题
【发布时间】：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/

【问题讨论】：

标签： javascript twitter-bootstrap x-editable

【解决方案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

【讨论】：