Panel: use self._off for panelclose instead of document.off

Fixes gh-7058
Closes gh-7260

(cherry picked from commit 3df9b3b)

Author: cgack

js/widgets/panel.js

@@ -299,7 +299,7 @@ $.widget( "mobile.panel", {
 				o = self.options,
 
 				_openPanel = function() {
-					self.document.off( "panelclose" );
+					self._off( self.document , "panelclose" );
 					self._page().jqmData( "panel", "open" );
 
 					if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) {
@@ -362,8 +362,8 @@ $.widget( "mobile.panel", {
 			self._trigger( "beforeopen" );
 
 			if ( self._page().jqmData( "panel" ) === "open" ) {
-				self.document.on( "panelclose", function() {
-					_openPanel();
+				self._on( self.document, {
+					"panelclose": _openPanel
 				});
 			} else {
 				_openPanel();

tests/unit/panel/index.html

@@ -100,6 +100,16 @@ <h1 id="demo-links">Panels</h1>
 			<a href="#panel-test-id-change">Open Panel</a>
 			<a href="#panel-test-external">Open Panel</a>
 		</div>
+			
+		<div data-nstest-role="panel" id="panel-panelclose-event">
+			<h1>Panel!</h1>
+		</div>
+		<div data-nstest-role="panel" id="panel-openfirst" data-position="left">
+			<h1>first panel</h1>
+		</div>
+		<div data-nstest-role="panel" id="panel-opensecond" data-position="right">
+			<h1>second panel</h1>
+		</div>
 	</div>
 	<div data-nstest-role="page" id="page2"></div>
 	<div id="external-panel-getWrapper-test"></div>

tests/unit/panel/panel_core.js

@@ -197,6 +197,38 @@
 		$panel.panel();
 	});
 
+	asyncTest( "panelclose not called on document", function() {
+		expect( 2 );
+		
+		$( document ).on( "panelopen", "#panel-panelclose-event", function() {
+			$(this).panel("close");
+		});
+
+		$( document ).on( "panelclose", "#panel-panelclose-event", function() {
+			ok( true, "document panelclose event emitted" );
+		});
+
+		$( document.body ).on( "panelclose", "#panel-panelclose-event", function() {
+			ok( true, "document.body panelclose event emitted" );
+			start();
+		});
+
+		$( "#panel-panelclose-event" ).panel("open");	
+		
+	});
+
+	asyncTest( "should be able to open a second panel", function() {
+		expect ( 1 );
+
+		$( document ).on( "panelopen", "#panel-opensecond", function() {
+			ok( true, "second panel opened" );
+			start();
+		});
+
+		$( "#panel-openfirst" ).panel( "open" );
+		$( "#panel-opensecond" ).panel( "open" );
+	});
+
 	module( "dismissable panel", {
 		setup: function(){
 			$.Event.prototype.originalEvent = {