1

jQuery Mobile マルチページ設定を使用して、次のようなクリック イベントをバインドしようとしています (このページはメイン ページではありません)。

HTML

<div data-role="page" id="thirdPage">
   <div class="wrapper">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment prev"></div>
      <div class="segment now"></div>
      <div class="segment next"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
   </div>
</div>

jQuery

$('.segment.next').on('click', function(){
var seg = $(this);
var width = seg.width();
var currentLeft = parseInt($('.wrapper').css('left'));
var left = currentLeft - width;
    //using transit.js for css animation
$('.wrapper').transition({left : left}, 300, 'linear', function(){
                    $('.segment').filter('.prev').removeClass('prev');
                    $('.segment').filter('.now').removeClass('now');
                    seg.removeClass('next').addClass('now');
                    seg.prev().addClass('prev');
                    seg.next().addClass('next');
                });
});

ほとんどのことは機能しているようです。必要に応じてクラスを削除/追加し、ラッパーを適切な量のピクセルで左側にアニメーション化します。ただし、$('.segment.next') の部分は正しく機能していません。最初のアニメーションの後に正しい $('.segment') にクラス「next」があっても、クリック イベントはこの「 new" $('.segment.next') 2 回目以降。代わりに、クリック イベントは引き続き元の $('.segment.next') にバインドされます。この問題を解決する方法はありますか? どんな助けでも大歓迎です！

事前にたくさんありがとう！

4

1 に答える 1

0 
$('#thirdPage').on('click', '.segment.next', function(){
    ...
});

委任は、常に存在する要素の子孫を参照することによって機能します。ドキュメントを使用する必要はありませんが、動的ではない祖先を使用する必要があります。

于 2013-03-13T02:53:37.483 に答える