2

タグ をクリックすると.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()の泡立ちは止まりません。なぜ機能しなくなったのですか？

4

1 に答える 1

4

問題は、のコンテンツを更新すると、divその中にあったすべての要素（それらにアタッチされたイベントハンドラーを含む）が破棄されることです。コードは、コードが実行された時点で存在する要素にclickイベントをフックしています。の新しい要素は接続されません。adiv adiv

あなたの場合、delegate（実例、withload）を使用する方が良いでしょう：

$(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です。使用しないラベルを定義していることになります。）
于 2011-11-30T11:58:38.867 に答える