X-Editable bootstrap 插件 "hidden" 动态添加元素的事件问题

Question

我无法让 x-editable 的 "hidden" 事件通过 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!');
});

Fiddle: http://jsfiddle.net/4vj8buks/17/

Answer 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!');
    });
});

Answer 2

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

隐藏事件没有冒泡到文档级别。为了解决这个问题，我不得不在插入元素的任何地方（在我的例子中只有一个地方）添加代码以再次设置事件。

有关此问题的讨论，请参阅此处，但帮助不大。 https://github.com/vitalets/x-editable/issues/86

X-Editable bootstrap 插件 "hidden" 动态添加元素的事件问题

X-Editable bootstrap plugin "hidden" event issue on dynamically added elements

javascript

twitter-bootstrap

x-editable