Jquery Events Not Firing After "cleaning" Knockout Bindings

In my project, I have an

where I specifically apply my Knockout.js bindings. I have to instantiate different viewmodels in that area depending on what the user clicks.

Solution 1:

This issue is nicely described in Knockout documentation. This quote describes what the issue is and what needs to be done:

When removing an element, Knockout runs logic to clean up any data associated with the element. As part of this logic, Knockout calls jQuery’s cleanData method if jQuery is loaded in your page. In advanced scenarios, you may want to prevent or customize how this data is removed in your application. Knockout exposes a function, ko.utils.domNodeDisposal.cleanExternalData(node), that can be overridden to support custom logic. For example, to prevent cleanData from being called, an empty function could be used to replace the standard cleanExternalData implementation:

ko.utils.domNodeDisposal.cleanExternalData = function () {
    // Do nothing. Now any jQuery data associated with elements will// not be cleaned up when the elements are removed from the DOM.
};

Here is the updated jsFiddle.

Share