0

我使用 jQuery 附加以下内容来创建一个使用 AJAX 加载加载内容的灯箱样式弹出窗口：

<div id="framebox-overlay">
  <div id="framebox-wrapper">
    <div id="framebox-nav-wrapper">
      <a href="#prev" class="framebox-prev framebox-nav">Previous</a>
      <a href="#next" class="framebox-next framebox-nav">Next</a>
    </div>
    <section id="framebox-content">
      <!--AJAX to insert #single-project-wrapper content here-->
    </section>
    <div id="framebox-close">
      <p>Click to close</p>
    </div>
  </div>
</div>

我正在尝试使附加的下一个/上一个链接正常工作（如上所示），但是链接没有正确触发.framebox-next：.framebox-prev

jQuery(document).ready(function(){

  $('.framebox-trigger').click(function(e){
    // Code that appends lightbox HTML and loads initial AJAX content goes here
  });

  // Code that isn't working:

  $('body').on('click', 'a .framebox-next', function(e) {
    e.preventDefault();

    //remove and add selected class
    var next = $('#portfolio-wrapper li.current-link').next('li > a');
    $('#portfolio-wrapper li.current-link').removeClass('current-link');
    $(next).addClass('current-link');

    //fade out and fade in
    var nexthref = $('#portfolio-wrapper li.current-link a').attr('href');
    $('#single-page-wrapper').fadeOut('slow', function(){
      var current = $('#portfolio-wrapper li.current-link a');
      $(this).load(nexthref + " #single-page-wrapper", function(){
        $(this).fadeIn('fast');
      });
    });
    return false;
  });

});

最后一点代码对附加的链接没有任何作用.framebox-next。我一直在寻找其他答案，似乎该.on()方法应该影响附加内容。

任何帮助或输入都会很棒。

4

1 回答 1

4

您的选择器对.framebox-next. 您之间有一个空格a，.framebox-next这意味着.framebox-next需要成为该元素的子a元素。

请改用此选择器：

 $('body').on('click', 'a.framebox-next', function(e) {
    ...
 }
于 2013-08-20T15:22:13.800 回答