Question

我使用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()方法应该影响附加内容。

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

Answer 1

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

请改用此选择器：

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

附加内容未触发 - 即使使用.on（）

1 个答案: