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

Question

I cannot get x-editable`s "hidden" event to work on dynamically added classes (or fields) via JS. I can manage it to work only if I add editable classes straight on HTML, but this approach is not suitable for me. What am I doing wrong?

$.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/

Pneumatic

Answer 1

You can hook into the editable's hidden event like this:

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

Psalmody

Answer 2

I don't think the accepted answer really fixes the issue.

The hidden event doesn't bubble up to the document level. To workaround I had to add code to setup the event again anywhere elements are inserted (which in my case was only one place).

See here for a discussion about this issue, though not very helpful. https://github.com/vitalets/x-editable/issues/86

Var

Answer 3

$(document).on('hidden.bs.popover', '.editable', function(){
 ...
}

Hawsehole

Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Accordion