Backbone and JQuery Mobile: Unbind events after a page transition - jquery-mobile

Question

I want to unbind all events when I change a page. I took this solution which extends the View's close function with this.unbind() call and I tried to combine it with JQM page transitions in a changePage function in the Router from here:
changePage: function(page){
$(page.el).attr("data-role", "page");
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
Then changePage looks like this:
changePage: function(page){
if (this.currentView)
this.currentView.close();
$(page.el).attr("data-role", "page");
this.currentView = page;
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
But then I get the JQM error:
Uncaught TypeError: Cannot call method '_trigger' of undefined jquery.mobile-1.1.0.js:2788
transitionPages jquery.mobile-1.1.0.js:2788
$.mobile.changePage jquery.mobile-1.1.0.js:3390
window.AppRouter.Backbone.Router.extend.changePage
I also have jqm-config.js which removes the page's DOM on pagehide event. Could I unbind all events here like: $(event.currentTarget).unbind(); ? But this doesn't work either.
$('div[data-role="page"]').live('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});

Answer 1

I had the same problem. The JQM error occurs because you try to call this.remove() in close() backbone extended method, but the event "pagehide" has already removed the view from the DOM.
Backbone.View.prototype.close = function () {
if (this.beforeClose) {
this.beforeClose();
}
this.remove();
this.unbind();
};
If you comment this.remove() on close method, it works.
Another option is to comment $(event.currentTarget).remove(); on pagehide jqmobile event and doesn't comment this.remove() on close method.
You can't do both, you should choose one of the two options. I prefer the second option, but I think that it's similar to first option. I don't recommend call unbind() on pagehide event.

Answer 2

I was facing the same problem, for some reason the pagechange event was not being fired and the previous pages were not removed from the DOM. Once I removed the non-active pages the CSS was back in action.
So I added
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
inside
$(document).bind('pagechange', function() {
});
So my jqm-config.js looks like this
$(document).bind("mobileinit", function () {
console.log('mobileinit');
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
//$.mobile.defaultPageTransition = "none";
});
$(document).bind('pagechange', function() {
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
console.log("Removing page");
$(event.currentTarget).remove();
});
});
It took me a few hours and this SO thread to get to this. Hope this helps someone.