1

I'm trying to bind a click event like the following using jQuery Mobile multi-page setting (this page is not the main page):

HMTL

<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');
                });
});

The most of the things seems to be working: it removes/adds classes as it should and animate wrapper to the left with the right amount of pixel. However, the $('.segment.next') part isn't working correctly - even though the right $('.segment') has the class "next" after the first animation, the click event is not bound to this "new" $('.segment.next') from the second time on. Instead, the click event is still bound to the original $('.segment.next'). Is there any way to fix this issue? Any help would be appreciated!

Thanks a bunch in advance!

4

1 回答 1

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

Delegation works by referencing descendents of an element that's always present. You don't have to use document, but you need to use some ancestor that isn't dynamic.

于 2013-03-13T02:53:37.483 回答