JavaScript StopPropagationはAjax .loadで動作しません
-
26-10-2019 - |
質問
使った .stopPropagataion()
泡を止める <li class="article">
をクリックするとき <a>
鬼ごっこ。
$(document).ready(function(){
$(".article a").click(function(e) {
e.stopPropagation();
});
});
このHTMLで:
<li class="article" onlick="javascript:somefunction();">
<div id="div_id">
<a>Some link</a>
</div>
</li>
すべてが正常に機能しましたが、その後使用しました $('#div_id').load("div_html.html")
一部のコンテンツをダイナミックにDIVにロードします。今私 .stopPropagation()
泡を止めません。なぜもう機能しないのですか?
解決
問題は、のコンテンツを更新するときに div
, 、その中にあるすべての要素を破壊します(任意のイベントハンドラーを含む)。あなたのコードは引っ張られています click
のイベント a
にある要素 div
コードが実行される時点;新着 a
の要素 div
接続されません。
あなたの場合、あなたは使用する方が良いです delegate
(ライブの例、 load
):
$(document).ready(function(){
$(".article div").delegate("a", "click", function(e) {
e.stopPropagation();
});
});
そのフック click
に div
代わりは。クリックが発生すると、リンクから div
, 、jqueryによって作成されたクリックハンドラーがそれを調べて、実際にクリックしたかどうかを確認します a
エレメント。もしそうなら、それはクリックを停止します。
jquery 1.7の時点で、新しい推奨される構文は on
代わりは:
$(document).ready(function(){
$(".article div").on("click", "a", function(e) {
e.stopPropagation();
});
});
議論の順序は異なることに注意してください delegate
, 、しかしそれ以外は同じことをします。
古いスタイルのDOM0ハンドラー(イベントハンドラー属性)と新しいスタイルのDOM2コード(ハンドラーがjQueryに取り付けられたハンドラー)を組み合わせることを避けることをお勧めします。多くのブラウザでは、2つのメカニズムが多少分離されており、あなたが望むほどうまく一緒に再生されない場合があります。
これに関する他の2つのコメント:
onlick="javascript:somefunction();"
- これは
onclick
, 、 いいえonlick
(あなたはありませんc
) - あなたはを使用しません
javascript:
イベントハンドラーの属性に関する擬似プロトコルのみhref
s。その部分を削除するだけです。 (なぜエラーを引き起こさないのですか?なぜなら 純粋に偶然の一致によって, 、それは有効なJavaScriptです - あなたはaを定義しています ラベル あなたは決して使用しません。)