Events not firing after second time .html() renders them

Question

I'm trying to render different pages of elements (pagination) with transitions with jquery, when I render the first page its all fine, but when the transition occurs all the events that I attached to my elements disappear and I dont know exactly why, .html() seems to be deleting them on the second render, not sure how I can pass them, thought .clone(true,true) was enough, but no.

var transition_default = function(offsetStart, offsetEnd) {
        plugin.currentElements.hide();
        plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone(true,true);
        plugin.el.html(plugin.currentElements);
        plugin.currentElements.show();
    };

Any help or correction will be appreciated.

Update 1: Seems this guys had almost the same issue, but im not completely sure how to apply that question solutions to my case. Backbone: event lost in re-render

Update 2: Found out how to apply the solution .detach(), see my answer below.

@Diego Regarding your edit. You claim that you are "not completely sure how to apply that question solutions [sic]". However, your [self-answer here](https://stackoverflow.com/a/45245869/1906307) is to use `.detach()`. [And that answer there](https://stackoverflow.com/a/12046271/1906307) is to use `.detach()`. — Louis, Jul 23 '17 at 12:06
@Louis Yes when i posted the edit my claim was true after some time and testing i found the way to properly impment the solution, gonna update my post again. — Diego, Jul 24 '17 at 14:03

score 1 · Answer 1 · answered Jul 21 '17 at 17:58

You should consider using delegate bindings.

$(existingParentElementOfThings).on(event, childElementSelector, eventHandler);

The issue is most likely that you are replacing the contents that you have bound on with html(), so the elements that had the bindings are gone. By using a delegate binding on a parent that is never removed, the events from the children will bubble up to it and will process as expected.

Diego · Accepted Answer · 2017-07-21T23:08:14.973

Ok i found the solution

var transition_default = function(offsetStart, offsetEnd) {
        plugin.currentElements.hide();
        plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone(true,true);
        $("#nombreINPUT").children().detach();
        $("#nombreINPUT").html(plugin.currentElements);
        plugin.currentElements.show();
    };

simply had to remove the elements with .detach() that doesnt break the bindings and add them again after that, for some reason the event binding is not destroyed this way.

"NombreINPUT" is the parent of the elements i was messing with.

Events not firing after second time .html() renders them

2 Answers2