18007
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.
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>
![Exception Using PayPal-PHP-SDK [Http response code 400]](/skin/wt/img/t.gif)