18007

jQuery click event not triggered on button inside form

Question:

I have a button inside a form like this:

<form> <input type="text" /> <input type="password" /> <button type="button" class="btn-login">Log in</button> </form>

I am trying to trigger the button's click event by doing this in the js:

$(document).ready(function () { $('.btn-login').live("click", function () { alert("Button clicked!"); }); });

But for some reason, this is not working.

If I remove the <form></form> that is around the textboxes and button, the click event is triggered, but this also means that my page is not showing properly, so I wonder if there is a way to trigger the button's click event when inside the form.

Answer1:

If you are using latest version of Jquery the try on instead of live as it is deprecated in version 1.9. If you are using version 1.7 then your code will work.

$(document).ready(function () { $('.btn-login').on("click", function () { alert("Button clicked!"); }); });

<a href="http://jsfiddle.net/HkhAh/" rel="nofollow">JS Fiddle .on() example</a>

<a href="http://jsfiddle.net/HkhAh/1/" rel="nofollow">JS Fiddle .live() example</a>

Answer2:

.live Function() has been removed as from jQuery 1.9 . Reference: <a href="http://api.jquery.com/live/" rel="nofollow">http://api.jquery.com/live/</a>

Please use .on() function for binding events. Reference: <a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a>

<strong>Solution:</strong>

$(document).ready(function () { $('.btn-login').on("click", function () { alert("Button clicked!"); }); });

Answer3:

I think below code should work for you

$(document).ready(function () { $(document).delegate('.btn-login', "click", function () { alert("Button clicked!"); }); });

It uses delegate from jquery, so even if it is added later in DOM via ajax, this function would work.

Answer4:

You can migrate 1.1.0 to 1.9.1 to use .live()

$(document).ready(function () { $('.btn-login').live("click", function () { alert("Button clicked!"); }); });

<strong>[Working Example]</strong> (<a href="http://jsfiddle.net/3hQbG/" rel="nofollow">http://jsfiddle.net/3hQbG/</a>)

Answer5:

My guess is that you are using a newer version of jquery, I tested with 1.9.1 and <a href="http://api.jquery.com/live/" rel="nofollow">jQuery.live</a> does not work (removed jquery 1.9). A simple change to <a href="http://api.jquery.com/on/" rel="nofollow">jQuery.on</a> and it sprang immediately to life.

<form> <input type="text" /> <input type="password" /> <button type="button" class="btn-login">Log in</button> </form> $(document).ready(function () { $('.btn-login').on("click", function () { alert("Button clicked!"); }); });

on <a href="http://jsfiddle.net/Xotic750/EbNK9/" rel="nofollow">jsfiddle</a>

As a note to comments, <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.5" rel="nofollow">this is what the W3C has to say</a>

<blockquote>

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

</blockquote>

<a href="http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/" rel="nofollow">This article demonstrates some of the differences between button and input</a>

And what of W3cschools advice?

<blockquote>

Tips and Notes Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

W3cschools: HTML Tag

</blockquote>

w3cschools are not an authorative body. As far as I can tell, the only browsers that had real issues were IE6 & IE7, so I guess their advice is a little out of date. It is possible that there are others but I could not find anything concrete. the best I could find was on <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/button" rel="nofollow">MDN <\button></a>

<blockquote>

IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo. IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7 This bug has been fixed in IE8

</blockquote>

Answer6:

instead of

<button type="button" class="btn-login">Log in</button>

use

<input type="button" class="btn-login">Log in</input>

Recommend

  • PHPMailer is causing 504 timeout error on my Digital Ocean server using nginx
  • How to properly fetch single cells in pandas: loc[index,column] VS get_value(index,column)
  • Java: How to insert a hashmap into MongoDB?
  • Is there any kind of jQuery.browser fallback?
  • NSOpenPanel's setDirectoryURL doesn't work on Lion
  • Java Date object constructor for getting string is deprecated
  • Jquery resizable reposition handle after scroll
  • IE11 textarea loses focus if another textarea is disabled
  • HighCharts - Show tooltip on column where value is 0 or null
  • unable to get jsonEncode in magento2
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • uml Composition relationships to RDF and OWL
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Install PHP intl extension on MacOS
  • jQuery .attr() and value
  • How to clear text inside text field when radio button is select
  • Get data from AJAX - How to
  • Email format validation in mvc3 view
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • Join two tables and save into third-sql
  • Updated Ionic CLI but shows previous version (Windows)
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?