javascript - 追加内容不会触发-即使使用.on()

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

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

最佳答案

您的选择器对于.framebox-next是错误的。在a和.framebox-next之间有一个空格，这意味着.framebox-next必须是a元素的子元素。

使用此选择器：

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