Columntoggle table: Use delegation to attach events to the checkboxes

Fixes #6683
jquery-archive · Jan 3, 2014 · d8375b7 · d8375b7
1 parent 143bdae
commit d8375b7
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 12 deletions.
diff --git a/js/widgets/table.columntoggle.js b/js/widgets/table.columntoggle.js
@@ -41,7 +41,6 @@ $.widget( "mobile.table", $.mobile.table, {
 		if ( this.options.enhanced ) {
 			this._menu = $( this.document[ 0 ].getElementById( this._id() + "-popup" ) ).children().first();
 			this._addToggles( this._menu, true );
-			this._bindToggles( this._menu );
 		} else {
 			this._menu = this._enhanceColToggle();
 			this.element.addClass( this.options.classes.columnToggleTable );
@@ -64,13 +63,8 @@ $.widget( "mobile.table", $.mobile.table, {
 		this._on( this.window, {
 			throttledresize: "_setToggleState"
 		});
-	},
-
-	_bindToggles: function( menu ) {
-		var inputs = menu.find( "input" );
-
-		this._on( inputs, {
-			change: "_menuInputChange"
+		this._on( this._menu, {
+			"change input": "_menuInputChange"
 		});
 	},
 
@@ -113,7 +107,6 @@ $.widget( "mobile.table", $.mobile.table, {
 		// set bindings here
 		if ( !keep ) {
 			menu.controlgroup( "refresh" );
-			this._bindToggles( menu );
 		}
 	},
 

diff --git a/tests/unit/table/index.html b/tests/unit/table/index.html
@@ -135,6 +135,33 @@ <h1>Basic Table</h1>
 		<h1>Basic Table</h1>
 	</div>
 	<div data-nstest-role="content">
+		<table data-nstest-role="table" data-nstest-mode="columntoggle" id="toggle-column-test">
+			<thead>
+				<tr class="ui-bar-d">
+					<th data-nstest-priority="2">Rank</th>
+					<th>Movie Title</th>
+					<th data-nstest-priority="3">Year</th>
+					<th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+					<th data-nstest-priority="5">Reviews</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>1</th>
+					<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
+					<td>1941</td>
+					<td>100%</td>
+					<td>74</td>
+				</tr>
+				<tr>
+					<th>2</th>
+					<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
+					<td>1942</td>
+					<td>97%</td>
+					<td>64</td>
+				</tr>
+			</tbody>
+		</table>
 		<table data-nstest-role="table" data-nstest-mode="columntoggle" id="movie-table-column">
 			<thead>
 				<tr class="ui-bar-d">

diff --git a/tests/unit/table/table_core.js b/tests/unit/table/table_core.js
@@ -157,7 +157,7 @@
 	asyncTest( "The page should be enhanced correctly" , function(){
 		setTimeout(function() {
 			var $popup = $('#column-table-test #movie-table-column-popup-popup'),
-				button = $('#column-table-test .ui-table-columntoggle-btn');
+				button = $('#column-table-test .ui-table-columntoggle-btn:last');
 
 			ok($('#column-table-test .ui-table-columntoggle').length, ".ui-table-columntoggle class added to table element");
 			ok($('#column-table-test .ui-table-columntoggle-btn').length, ".ui-table-columntoggle-btn button added");
@@ -173,6 +173,62 @@
 		}, 800);
 	});
 
+	asyncTest( "Toggle column", function() {
+		expect( 6 );
+
+		var initial, post,
+			input = $( "#toggle-column-test-popup input:nth(1)" ),
+			column = $( "#toggle-column-test tr>:nth-child(3)" ),
+
+			// Ascertain visibility and consistency
+			checkColumn = function( messagePrefix ) {
+				var visible = undefined,
+					inconsistent = false;
+
+				column.each( function() {
+					if ( visible === undefined ) {
+						visible = !!$( this ).is( ":visible" );
+					} else {
+						inconsistent = ( !!$( this ).is( ":visible" ) !== visible );
+					}
+					if ( inconsistent ) {
+
+						// Stop checking
+						return false;
+					}
+				});
+
+				deepEqual( inconsistent, false,
+					messagePrefix + " visibility of column members is consistent" );
+				deepEqual( visible, input.is( ":checked" ),
+					messagePrefix + " visibility of column members coincides with the " +
+					"corresponding column checkbox state" );
+
+				return visible;
+			};
+
+			$.testHelper.detailedEventCascade([
+
+				function() {
+					initial = checkColumn( "Initially: " );
+					input.click().checkboxradio( "refresh" ).trigger( "change" );
+				},
+
+				{
+					change: { src: input, event: "change.toggleColumn1" }
+				},
+
+				function( result ) {
+					deepEqual( result.change.timedOut, false, "Clicking the checkbox " +
+						"has resulted in a 'change' event" );
+					post = checkColumn( "After clicking: " );
+					deepEqual( initial !== post, true,
+						"Visibility was toggled by clicking the checkbox" );
+					start();
+				}
+			]);
+	});
+
 	asyncTest( "Column toggle table refresh" , function(){
 
 		// hide one column and refresh
@@ -258,15 +314,15 @@
 		var $input;
 		$.testHelper.pageSequence([
 			function() {
-				$( ".ui-table-columntoggle-btn" ).click();
+				$( ".ui-table-columntoggle-btn:last" ).click();
 			},
 			function() {
 				setTimeout(function() {
 					ok( $( "#movie-table-column-popup-popup" ).not( ".ui-popup-hidden" ) , "Table popup is shown on click" );
 				}, 800);
 			},
 			function() {
-				$input = $( ".ui-popup-container" ).find( "input:first" );
+				$input = $( "#movie-table-column-popup-popup" ).find( "input:first" );
 				$input.click();
 			},
 			function(){