jQuery click event not triggered on button inside

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.

Answer 1

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!");
      });
});

JS Fiddle .on() example

JS Fiddle .live() example

Answer 2

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.

Answer 3

instead of

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

use

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

Answer 4

My guess is that you are using a newer version of jquery, I tested with 1.9.1 and jQuery.live does not work (removed jquery 1.9). A simple change to jQuery.on 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 jsfiddle

As a note to comments, this is what the W3C has to say

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

This article demonstrates some of the differences between button and input

And what of W3cschools advice?

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

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 MDN <\button>

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

Answer 5

.live Function() has been removed as from jQuery 1.9 . Reference: http://api.jquery.com/live/

Please use .on() function for binding events. Reference: http://api.jquery.com/on/

Solution:

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

Answer 6

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

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

[Working Example] (http://jsfiddle.net/3hQbG/)