Changed the way submit buttons work. Now, form input/button elements are appended to a div-based "button", invisibly filling its width and height. The user now interacts directly with the native control, rather than having to trigger a click from another anchor (which formerly prevented some native submit event handling from working).

A workaround is still included to ensure the input's name/value is submitted along with the form when it's not a type=reset, as this is necessary for the button data to appear in the serialized form data.

js/jquery.mobile.forms.button.js

@@ -17,36 +17,11 @@ $.widget( "mobile.button", $.mobile.widget, {
 	},
 	_create: function(){
 		var $el = this.element,
-			o = this.options,
-			type = $el.attr('type');
-			$el
-				.addClass('ui-btn-hidden')
-				.attr('tabindex','-1');
+			o = this.options;
 		
 		//add ARIA role
-		this.button = $( "<a>", { 
-				"href": "#",
-				"role": "button",
-				"aria-label": $el.attr( "type" ) 
-			} )
+		this.button = $( "<div></div>" )
 			.text( $el.text() || $el.val() )
-			.insertBefore( $el )
-			.click(function(e){
-				if(!o.disabled){
-				if ( $el.attr("type") !== "reset" ){
-					var $buttonPlaceholder = $("<input>", 
-							{type: "hidden", name: $el.attr("name"), value: $el.attr("value")})
-							.insertBefore($el);
-							
-					}
-					$el.submit();	
-					$buttonPlaceholder.remove();				
-				}
-				else{
-					$el.trigger("click")
-				}
-				e.preventDefault();
-			})
 			.buttonMarkup({
 				theme: o.theme, 
 				icon: o.icon,
@@ -55,7 +30,24 @@ $.widget( "mobile.button", $.mobile.widget, {
 				corners: o.corners,
 				shadow: o.shadow,
 				iconshadow: o.iconshadow
+			})
+			.insertBefore( $el )
+			.append( $el.addClass('ui-btn-hidden') );
+		
+		//add hidden input during submit
+		if( $el.attr('type') !== 'reset' ){
+			$el.click(function(){
+				var $buttonPlaceholder = $("<input>", 
+						{type: "hidden", name: $el.attr("name"), value: $el.attr("value")})
+						.insertBefore($el);
+						
+				//bind to doc to remove after submit handling	
+				$(document).submit(function(){
+					 $buttonPlaceholder.remove();
+				});
 			});
+		}
+			
 	},
 
 	enable: function(){

themes/default/jquery.mobile.button.css

@@ -50,4 +50,4 @@
 .ui-btn-icon-top .ui-icon { top: 5px; }
 .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
 /*hiding native button,inputs */
-.ui-btn-hidden {  position: absolute; left: -9999px; }
+.ui-btn-hidden {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: 0; cursor: pointer; }