From 91a5b8c09871c5dd940ee859651b979b4a75c3a9 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 6 Dec 2010 11:40:28 -0500
Subject: [PATCH] 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        | 46 ++++++++++---------------
 themes/default/jquery.mobile.button.css |  2 +-
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js
index 2afeb732..31db9786 100644
--- a/js/jquery.mobile.forms.button.js
+++ b/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(){
diff --git a/themes/default/jquery.mobile.button.css b/themes/default/jquery.mobile.button.css
index 2ae040d7..0b10abba 100644
--- a/themes/default/jquery.mobile.button.css
+++ b/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; }