0

私は次のJavaScriptを持っています：

<script>
  $(document).ready(function() {
    $('[class^="commentbubble_"]').click(function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
        $('.commentform_'+ID).toggle();
        $('#commentsection').masonry( 'reload' );
    });
  });
</script>

結果の最初のページでは機能しますが、新しく追加されたページでは機能しません。この機能が新しく追加されたコンテンツで確実に機能するようにする方法はありますか?

ありがとうございました。

4

4 に答える 4

3

ページの読み込み時に利用可能だった親へのイベント、またはハンドラーを使用したイベント$(document)自体への委任を試すことができます。.on()

$(document).ready(function() {
  $(document).on('click', '[class^="commentbubble_"]', function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
      $('.commentform_'+ID).toggle();
      $('#commentsection').masonry( 'reload' );
  });
});
于 2013-03-28T05:07:54.430 に答える
0

ページがロードされた後にajaxロードでデータを追加しているため、.onイベントハンドラーを使用して、.clickイベントの代わりに要素のイベントをバインドする必要があります。

構文は次のとおりです。

.on( events [, selector ] [, data ], handler(eventObject) )

したがって、スクリプトは次のようになります。

<script>
  $(document).ready(function() {
    $('document).on('click','[class^="commentbubble_"]',function () { 
      var ID = $(this).attr('class').replace('commentbubble_', '');
        $('.commentform_'+ID).toggle();
        $('#commentsection').masonry( 'reload' );
    });
  });
</script>

詳細については、http://api.jquery.com/on/を参照してください。

于 2013-03-28T05:20:16.887 に答える
0

$().ready は現在の要素でのみ機能します

バインドが必要な要素を追加するときはクリックイベントです

于 2013-03-28T05:18:52.587 に答える
-1

ライブで使う

('[class^="commentbubble_"]').live ('click', function () {

注: liveは非推奨です。on@Jai の提案に従って使用してください

于 2013-03-28T05:09:17.213 に答える