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>テキストボックスとボタンの周りにあるを削除すると、クリックイベントがトリガーされますが、これは私のページが正しく表示されないことも意味するので、フォーム内でボタンのクリックイベントをトリガーする方法があるのだろうか.

score 2 · Accepted Answer

最新バージョンの Jquery を使用している場合は、バージョン 1.9 で非推奨になっているon代わりに試してください。liveバージョン 1.7 を使用している場合、コードは機能します。

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

score 1 · Accepted Answer

.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!");
      });
});

score 0 · Accepted Answer

以下のコードはあなたのために働くはずだと思います

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

jquery からのデリゲートを使用しているため、あとから ajax 経由で DOM に追加してもこの関数は機能します。

score -1 · Accepted Answer

それ以外の

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

使用する

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

6 に答える 6