3

要素のループ内の各要素に非表示のコンテンツを表示する jQuery 関数があります。これは完全に機能しますが、問題は、新しい要素をループに追加すると機能しなくなることです。実際には一部の要素で機能し、他の要素では機能しません (奇妙な動作)。

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $(".see_all").click(function(){

 if ($(this).next().css('display') == 'none'){
 $(this).next().show();

}
else

if($(this).next().is(':visible')){
   $(this).next().hide();
 }

});
})
</script>

jQuery コードに問題はありますか? 新しく追加された要素と以前に表示された要素の両方で機能させるにはどうすればよいですか。

HTML コード

   <div class="center_container">
   <%for users in @user%>
  <div class="see_all">

  <span style="color:#808080;cursor:pointer">See All Reviews(<%=@beep_count=       (@beep.opposes.count +  @beep.neutrals.count + @beep.supports.count)%>)</span>

 </div>

     <div style="display:none;" class="hidden">

      No reviews available 

     </div>
 <%end%>

 </div>
4

2 に答える 2

5

これは、jQ 1.7+ を使用している場合にのみ機能します。そうでない場合は、jQuery のデリゲート メソッドを見てください。 これは、jQuery < 1.7 で同じことを実現します。ただし、最新バージョンを使用しない理由はありません:)

これは、クリック ハンドラーをバインドする時点で次のことが原因です。

 $(".see_all").click()

selector に一致する現在の要素にのみバインドされ.see_allます。

これを回避するためにできることは、jQuery を使用on()して委任することです。

$("body").on("click", ".see_all", function() {
  //do stuff
});

このハンドラは にバインドされておりbody、クリックを検出すると、クリックされた要素がセレクタに一致するかどうかを確認します.see_all。存在する場合は、関数を実行します。にバインドされているためbody、新しい.see_all要素が DOM にも挿入された場合に機能します。

すべて.see_allが 1 つの 内に含まれている場合は、単に例として使用するのdivではなく、それを使用して委任します。すべての要素bodyを包含する最初のものに委譲します。.see_all

補足として、新しい API.on()を.off()イベント バインドに使用する必要があります。1.7 以降、これらの方法が推奨されるようになりました。.on() のドキュメント。

于 2012-08-21T11:22:35.033 に答える
2

まず、これはトグルを使用して最適化できます。次に、これには on() イベント ハンドラーが必要になります。これは、クリックはドキュメントの準備ができている既存の要素にのみバインドされるためです。新しい要素が追加されたら、クリック イベントを動的に再バインドする方法が必要です。

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $("body").on('click', '.see_all', function(){
  $(this).next().toggle();
});
})
</script>
于 2012-08-21T11:21:26.627 に答える