javascript jQuery单击事件未在表单内的按钮上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16192190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click event not triggered on button inside form
提问by bale3
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:
我试图通过在 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.
如果我删除<form></form>文本框和按钮周围的那个，就会触发点击事件，但这也意味着我的页面没有正确显示，所以我想知道是否有办法在表单内部触发按钮的点击事件。
回答by Sachin
If you are using latest version of Jquery the try oninstead of liveas it is deprecated in version 1.9. If you are using version 1.7 then your code will work.
如果您使用的是最新版本的 Jquery，请尝试on而不是live因为它在 1.9 版中已被弃用。如果您使用的是 1.7 版，那么您的代码将起作用。
$(document).ready(function () {
$('.btn-login').on("click", function () {
alert("Button clicked!");
});
});
回答by Mysteryos
.live Function() has been removed as from jQuery 1.9 . Reference: http://api.jquery.com/live/
.live Function() 已从 jQuery 1.9 中删除。参考：http: //api.jquery.com/live/
Please use .on() function for binding events. Reference: http://api.jquery.com/on/
请使用 .on() 函数绑定事件。参考：http: //api.jquery.com/on/
Solution:
解决方案：
$(document).ready(function () {
$('.btn-login').on("click", function () {
alert("Button clicked!");
});
});
回答by Xotic750
My guess is that you are using a newer version of jquery, I tested with 1.9.1 and jQuery.livedoes not work (removed jquery 1.9). A simple change to jQuery.onand it sprang immediately to life.
我的猜测是您使用的是较新版本的 jquery，我使用 1.9.1 进行了测试，但jQuery.live不起作用（删除了 jquery 1.9）。对jQuery.on 进行一个简单的更改，它立即变得生动起来。
<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
作为评论的注释，这就是 W3C 必须说的
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
使用 BUTTON 元素创建的按钮的功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能有内容。例如，包含图像的 BUTTON 元素功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。
按钮元素 - W3C
This article demonstrates some of the differences between button and input
And what of W3cschools advice?
W3cschools 的建议是什么？
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
提示和注意事项 注意：如果您在 HTML 表单中使用该元素，则不同的浏览器可能会提交不同的值。用于在 HTML 表单中创建按钮。
W3cschools：HTML 标签
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>
w3cschools 不是权威机构。据我所知，唯一有真正问题的浏览器是 IE6 和 IE7，所以我猜他们的建议有点过时了。可能还有其他人，但我找不到任何具体的东西。我能找到的最好的是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
IE7 有一个错误，当使用 Click me 提交表单时，发送的 POST 数据将导致 myButton=Click me 而不是 myButton=foo。IE6 有一个更严重的错误，通过按钮提交表单将提交表单的所有按钮，与 IE7 相同 该错误已在 IE8 中修复
回答by Sudesh
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.
它使用 jquery 的委托，因此即使稍后通过 ajax 将它添加到 DOM 中，该函数也能工作。
回答by Dhaval Marthak
You can migrate 1.1.0 to 1.9.1 to use .live()
您可以将 1.1.0 迁移到 1.9.1 以使用 .live()
$(document).ready(function () {
$('.btn-login').live("click", function () {
alert("Button clicked!");
});
});
[Working Example](http://jsfiddle.net/3hQbG/)
[工作示例]（http://jsfiddle.net/3hQbG/）
回答by rahul maindargi
instead of
代替
<button type="button" class="btn-login">Log in</button>
use
利用
<input type="button" class="btn-login">Log in</input>
