1

ページに複数の myclass クラスがあり、ajax を使用してそれらのいくつかを追加します

私がこれをしたら

$('.myclass').click(function(){
          alert(1);
});

すべての非 ajax 追加リクエストに対して機能しますが、ajax によって追加されるクラスに対しては機能しません。これが機能する人のために

$(body).on('click','myclass',function(){
alert(1);
});

私の質問、それはなぜですか??

4

3 に答える 3

5

簡単な説明は

通常のイベント登録モデルを使用すると、ハンドラー登録の実行時点で dom に存在する対象に直接ハンドラーが登録されます。したがって、後で動的に追加される要素は、これらのハンドラーを取得しません。

これに対する解決策は、イベント デリゲーションを使用することです。このモデルでは、ソース要素を除外するセレクターを使用してページが読み込まれたときに存在する祖先要素にハンドラーが登録されます。これはイベント伝播を利用します - 要素で発生したイベントはすべての祖先要素に伝播されます (フォーカス イベントのようないくつかの例外があります)。そのため、要素で発生したイベントは、ハンドラーが登録されたそのうちの 1 つの祖先要素に伝播され、次にイベント ソース要素 (event.target) とその祖先が、2 番目のパラメーターとして渡されたセレクターと照合されます。ハンドラが実行されます。 http://api.jquery.com/on/#direct-and-delegated-events

于 2013-09-10T00:05:32.567 に答える
2

最初のメソッドは、ハンドラーの実行時に存在する要素を反復処理するため、その時点で見つかったものはすべてバインドされます。

$('.myclass').click(function(){
          alert(1);
});

これにより、この時点以降に作成された要素を個別に処理できるようになります。

イベント委任 (リストした 2 番目の方法) を使用すると、必要なセレクターを使用して DOM に存在するすべての要素を管理できます。

$(body).on('click','myclass',function(){
    alert(1);
});

ページに動的要素を追加することが予想される場合は、イベント委任を使用するソリューションを使用すると、要素がいつ作成されたかに関係なく、すべての要素を処理できます。

于 2013-09-10T00:09:58.240 に答える
-3

このコードを試してください:

$('.myclass').on("click", function(){
      alert(1);
});

ライブは、この要素がまだdomに存在しない場合でも、要素にイベントをデリゲートするためのものです

于 2013-09-10T00:09:05.543 に答える