JavaScript StopPropagationはAjax .loadで動作しません

StackOverflow https://stackoverflow.com/questions/8325506

質問

使った .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();"
  1. これは onclick, 、 いいえ onlick （あなたはありません c)
  2. あなたはを使用しません javascript: イベントハンドラーの属性に関する擬似プロトコルのみ hrefs。その部分を削除するだけです。 （なぜエラーを引き起こさないのですか？なぜなら 純粋に偶然の一致によって, 、それは有効なJavaScriptです - あなたはaを定義しています ラベル あなたは決して使用しません。）
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top