ホームページ  >  記事  >  ウェブフロントエンド  >  クリックを使用してjQueryによってバインドされたイベントが無効なのはなぜですか?

クリックを使用してjQueryによってバインドされたイベントが無効なのはなぜですか?

黄舟
黄舟オリジナル
2017-06-27 10:14:242294ブラウズ

jqueryclickを使用したイベントのバインドは無効です

$(this).children(":last").prev().after("<div class=&#39;bounty-add&#39;><a target=&#39;_blank&#39; href=&#39;bounties.php#/p=add&XID=" + playerId + "&#39;>[Bounty]</a></div>"); 
$(this).children(":last").prev().after("<div class=&#39;info-add&#39;><a href=&#39;#&#39;>[Refresh]</a></div>");        
$("div.bounty-add").css(addStyle);
$("div.info-add").css(addStyle);
         
         
$(this).children(":last").prev().children("a").click(function() {
   alert("Hello");
});

関連する基本的なコードは上記の通りでスムーズに要素を取得できますが、Chromeの「Elements」ではバインドされたクリックイベントが無効です。 「ツール」「イベント リスナー」でも有効なバインディングが見つかりませんでした。
上記の基本コードで追加された DOM はすべて有効です。外側の層は 2 つのループ ですが、バインディング ステップを含むすべてのコードはスムーズに実行できるはずです。実行が完了しても a 要素をクリックしても無効となり、バインドされた関数が見つかりません。 。 。 。 。 。 。

$(this).children(":last").prev().children("a").on("click",function() {
   alert("Hello");
});

onも試してみましたがダメでした この2つは基本的に同じでしょうか?
a 要素自体にはクリック可能な 属性 があるため、クリック後も元のイベント (href=‘#’ など) に応答し、アドレス バーの末尾に # が追加されます。 。 。 。元のイベントが後から追加したイベントを上書きしてしまうからでしょうか? 。 。 。 。 。

以前のバインディングは

$(this).children(":last").prev().children("a").on("click",function() {
   alert("Hello");
});

通常のクリックバインディングと同じでした
このようにバインドしてみてください

$(this).on("click",".info-add a",function() {
   alert("Hello");
});

要素は動的に生成されていますか?
その場合は、ライブ バインディングまたはデリゲート バインディングを使用してください

ライブ jquery1.9 は削除されました。これは、要素が見つからない、またはバインドできないということではなく、バインド後に無効になるということです。
クリックリスナーにも含まれる a 要素を p 要素に直接変更しましたが、どうしても alter("hello"); がトリガーされません。 。 。 。 。 。

まず、firebugを使用して、ページにスクリプト エラーがあるかどうかを確認します
もう一度、コードで a 要素が見つかったことを確認します
最後に。

$(document).on("click",".info-add",function(){
alert("ok")
})
を使用できます

うまくいかない場合は、完全なコードを送ってください

以上がクリックを使用してjQueryによってバインドされたイベントが無効なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。