javascript - 表单内的按钮未触发 jQuery 单击事件

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

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