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/

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