0

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

<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>文本框和按钮周围的那个，就会触发点击事件，但这也意味着我的页面没有正确显示，所以我想知道是否有办法在表单内触发按钮的点击事件。

4

6 回答 6

2

如果您使用的是最新版本的 Jquery，请使用 tryon而不是live因为它在 1.9 版中已被弃用。如果您使用的是 1.7 版，那么您的代码将有效。

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

JS Fiddle .on() 示例

JS Fiddle .live() 示例

于 2013-04-24T12:39:10.403 回答
1

.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!");
      });
});
于 2013-04-24T12:40:19.943 回答
0

我的猜测是您使用的是较新版本的 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!");
    });
});

在jsfiddle上

作为评论的注释，这就是 W3C 必须说的

使用 BUTTON 元素创建的按钮功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素的功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。

按钮元素 - W3C

本文演示了按钮和输入之间的一些区别

W3cschools 的建议是什么？

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

W3cschools: HTML 标签

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

IE7 有一个错误，当使用 Click me 提交表单时，发送的 POST 数据将导致 myButton=Click me 而不是 myButton=foo。IE6有一个更严重的bug，通过按钮提交表单会提交表单的所有按钮，和IE7一样的bug 这个bug已经在IE8中修复了

于 2013-04-24T12:44:15.053 回答
0

我认为下面的代码应该适合你

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

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

于 2013-04-24T12:45:23.840 回答
0

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

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

[工作示例] ( http://jsfiddle.net/3hQbG/ )

于 2013-04-24T12:45:40.670 回答
-1

代替

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

采用

<input type="button" class="btn-login">Log in</input>
于 2013-04-24T12:40:19.267 回答