Panel: Do not store ID inside the widget

Fixes gh-6769

js/widgets/panel.js

@@ -34,7 +34,6 @@ $.widget( "mobile.panel", {
 		positionFixed: false
 	},
 
-	_panelID: null,
 	_closeLink: null,
 	_parentPage: null,
 	_page: null,
@@ -49,7 +48,6 @@ $.widget( "mobile.panel", {
 
 		// expose some private props to other methods
 		$.extend( this, {
-			_panelID: el.attr( "id" ),
 			_closeLink: el.find( ":jqmData(rel='close')" ),
 			_parentPage: ( parentPage.length > 0 ) ? parentPage : false,
 			_page: this._getPage,
@@ -91,7 +89,7 @@ $.widget( "mobile.panel", {
 		var self = this,
 			target = self._parentPage ? self._parentPage.parent() : self.element.parent();
 
-		self._modal = $( "<div class='" + self.options.classes.modal + "' data-panelid='" + self._panelID + "'></div>" )
+		self._modal = $( "<div class='" + self.options.classes.modal + "'></div>" )
 			.on( "mousedown", function() {
 				self.close();
 			})
@@ -223,9 +221,13 @@ $.widget( "mobile.panel", {
 	},
 
 	_handleClick: function( e ) {
-		if (  e.currentTarget.href.split( "#" )[ 1 ] === this._panelID && this._panelID !== undefined ) {
+		var link,
+			panelId = this.element.attr( "id" );
+
+		if ( e.currentTarget.href.split( "#" )[ 1 ] === panelId && panelId !== undefined ) {
+
 			e.preventDefault();
-			var link = $( e.target );
+			link = $( e.target );
 			if ( link.hasClass( "ui-btn" ) ) {
 				link.addClass( $.mobile.activeBtnClass );
 				this.element.one( "panelopen panelclose", function() {

tests/unit/panel/index.html

@@ -70,6 +70,9 @@
 		<div data-nstest-role="panel" id="panel-test-ignore-unrelated-link">
 			<a href="#" id="unrelated-link" data-nstest-ajax="false">Unrelated link</a>
 		</div>
+		<div data-nstest-role="panel" id="panel-test-id-change">
+			<p>Contents of a panel.</p>
+		</div>
 		<div data-nstest-role="header">
 			<h1>Panel Test</h1>
 		</div>
@@ -85,6 +88,7 @@ <h1 id="demo-links">Panels</h1>
 			<a href="#panel-test-destroy">Open Panel</a>
 			<a href="#panel-test-non-default-theme">Open Panel</a>
 			<a href="#panel-test-with-close">Open Panel</a>
+			<a href="#panel-test-id-change">Open Panel</a>
 		</div>
 	</div>
 

tests/unit/panel/panel_core.js

@@ -326,4 +326,32 @@
 		]);
 	});
 
+	asyncTest( "Panel still opens after changing its ID", function() {
+		var eventNs = ".panelStillOpensAfterChangingItsId",
+			idTestPanel = $( "#panel-test-id-change" ),
+			idTestLink = $( "a[href='#panel-test-id-change']" );
+
+		expect( 1 );
+
+		idTestPanel.attr( "id", "something-else" );
+		idTestLink.attr( "href", "#something-else" );
+
+		$.testHelper.detailedEventCascade([
+			function() {
+				idTestLink.click();
+			},
+			{
+				panelopen: { src: idTestPanel, event: "panelopen" + eventNs + "1" }
+			},
+			function( result ) {
+				deepEqual( result.panelopen.timedOut, false, "Renamed panel has opened" );
+				idTestPanel.panel( "close" );
+			},
+			{
+				panelclose: { src: idTestPanel, event: "panelclose" + eventNs + "2" }
+			},
+			start
+		]);
+	});
+
 }( jQuery ));