EDIT: Sorry, I was going to write the title after I finished writing this part, but I forgot and clicked "submit" -- so now it's stuck.

I'm using jQuery Mobile 1.3.1 (and jQuery 1.9.1) and I'm trying to make the panels responsive. "So far so good" except that the function that worked yesterday isn't working today. When the window gets re-sized, the panel should toggle open/closed and the button to open the panel should go away when the panel is out. For some reason the function is stopping after the .panel("open") part. I put an alert inside the function to "test" where it was breaking, and it's all running perfectly except for TWO things.
  1. The function doesn't run again when the window is re-sized.
  2. The function succeeds in opening the panel, but not in hiding the link with the panel-button class.


It did work yesterday, though, which is very frustrating. I haven't, to my knowledge, changed anything that affects the script. The classes and structure have all been double- and triple-checked and they're exactly how they're supposed to be.

The script itself I got from someone on here, I'm pretty sure, so while the logic behind it is sound, I'm not sure how to go about debugging the actual code here.

Code:
$(function() {
	// Optimalisation: Store the references outside the event handler:
	var $window = $(window);
	var $pane = $('#pane1');

	function checkWidth() {
		var windowsize = $window.width();
			if (windowsize > 880) {
			$( ".navPanel" ).panel( "open" );
			$( ".panel-button" ).hide();
		}else{
			$( ".navPanel" ).panel( "close" );
			$( ".panel-button" ).show();
		}
	}

	// Execute on load
	checkWidth();

	// Bind event listener
	$(window).resize(checkWidth);
});
Thanks in advance for any help! It's greatly appreciated.