Question

我在这样的表单中有一个按钮：

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

我试图通过在js中执行此操作来触发按钮的单击事件：

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

但由于某种原因，这不起作用。

如果我删除了文本框和按钮周围的<form></form>，则会触发click事件，但这也意味着我的页面显示不正常，所以我想知道是否有办法触发按钮的在表单内单击事件。

Answer 1

如果您使用的是最新版本的Jquery，请尝试on而不是live，因为它在1.9版中已弃用。如果您使用的是1.7版本，那么您的代码将会正常运行。

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

JS Fiddle .on() example

JS Fiddle .live() example

Answer 2

.live Function（）已从jQuery 1.9中删除。参考：http://api.jquery.com/live/

请使用.on（）函数进行绑定事件。参考：http://api.jquery.com/on/

<强>解决方案：

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

Answer 3

我的猜测是你使用的是更新版本的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

作为评论的注释，this is what the W3C has to say

使用BUTTON元素创建的按钮功能就像按钮一样   使用INPUT元素创建，但它们提供更丰富的渲染   可能性：BUTTON元素可能包含内容。例如，a   包含图像功能的BUTTON元素可能类似于   一个INPUT元素，其类型设置为“image”，但是BUTTON元素   类型允许内容。

按钮元素 - W3C

This article demonstrates some of the differences between button and input

W3cschools的建议是什么？

提示和注释注意：如果您在HTML表单中使用该元素，   不同浏览器可能会提交不同的值用来创建   HTML表单中的按钮。

W3cschools：HTML标记

w3cschools不是一个授权机构。据我所知，唯一有真正问题的浏览器是IE6＆amp; IE7，所以我猜他们的建议有点过时了。有可能还有其他但我找不到任何具体的东西。我能找到的最好的是MDN <\button>

IE7有一个错误，当用Click Click提交表单时，发送的POST数据会导致myButton =点击我而不是myButton = foo。 IE6有一个偶数通过按钮提交表单的更糟糕的错误将提交所有窗体的按钮，与IE7具有相同的错误此错误已得到修复在IE8中

Answer 4

我认为以下代码应该适合你

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

它使用来自jquery的委托，所以即使稍后在DOM中通过ajax添加它，这个函数也可以工作。

Answer 5

您可以将1.1.0迁移到1.9.1以使用.live()

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

[工作示例] （http://jsfiddle.net/3hQbG/）

Answer 6

而不是

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

使用

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

jQuery单击事件未在表单内的按钮上触发

6 个答案: