CODEWITHSUNDEEP
javascripttwitter-bootstrapx-editable
gzzz
gzzz

Reputation: 63

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

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/

Upvotes: 6

Views: 1478

Answers (3)

Vitaly Litvinov
Vitaly Litvinov

Reputation: 29

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

Upvotes: 0

Andrew
Andrew

Reputation: 2880

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

Upvotes: 0

tdbts
tdbts

Reputation: 525

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

Upvotes: 4

Related Questions