javascript - 附加内容未触发 - 即使使用 .on()

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) {
    ...
 }