AJAX内容未加载到附加的html中

Question

我正在开展投资组合项目。我想构建一个自定义灯箱样式脚本，使用AJAX将另一个共享域页面中的内容加载到新创建的弹出窗口中。内容传递时会出现加载栏。

问题： 内容未按预期加载到弹出窗口中。 AJAX应该从另一个页面中提取#single-project-wrapper部分的内容，并将其加载到使用jQuery附加到主页主体的#framebox-content部分。

这是我的代码：

jQuery(document).ready(function(){

    var $ = jQuery;

    jQuery('.framebox-trigger').click(function(e){

        // Prevent default linking
        e.preventDefault();

                             // Add content for lightbox type display
        var $singleContent = '<div id="framebox-overlay">' +
                               '<section id="framebox-content">' +
                                  '<div class="framebox-close">' +
                                    '<p>Click to close</p>' +
                                  '</div>' +
                                  //AJAX to insert #single-project-wrapper content here
                                '</section>' +
                              '</div>',
                 $bodyCall = $('body'),
                   $toLoad = $(this).attr('href')+' #single-project-wrapper';


    // Add overlay and loading bar
    $bodyCall.removeClass('framebox-freeze');
    $bodyCall.addClass('framebox-freeze').append($singleContent, loadContent);
    // Add loading beacon
    $('.framebox-freeze').append('<span id="framebox-loading">+ Loading +</span>');
    $('#framebox-loading, #framebox-overlay').fadeIn('fast');

    // Load AJAX content
    function loadContent(){
        $('#framebox-content').load($toLoad , showNewContent)
    };

    // Show loaded AJAX content and hide loading bar
    function showNewContent(){
        $('#single-project-wrapper').show('normal', hideLoader)
    };

    // Hide loading bar
    function hideLoader(){
        $('#framebox-loading').fadeOut('fast')
    };

    });

    // Close out Framebox
    jQuery(document).on('click', '#framebox-overlay, #framebox-close', function(){
        $bodyCall.removeClass('framebox-freeze');
        $('#framebox-overlay, #framebox-loading').fadeOut('fast');
  });

});

我不知道我做错了什么!!

其他可能很重要的事情：

• 这是在wordpress网站上运行
• 此时该网站仅通过MAMP在本地运行

如果有人可以帮助我，我将不胜感激。我是jQuery的新手并且正在尝试学习，这是几个教程的混搭。对不起，如果它是一团糟。如果您还有其他需要，请告诉我。

EDIT / UPDATE !!!!!

如下所述@ᾠῗᵲᄐᶌ，我使用.append都错了。改变这一行：

$bodyCall.addClass('framebox-freeze').append($singleContent, loadContent);

这项工作：

$bodyCall.addClass('framebox-freeze').append($singleContent).fadeIn('fast', loadContent);

这解决了获取内容的问题。

然而，现在，内容会在第一个链接选择时加载，但随后在后续选择中，加载栏不会消失，并浮动在加载的内容上。有什么想法？

Answer 1

在你的函数loadContent（）中，你需要在'toLoad'之前放一个$符号，因为这是你之前创建的jquery变量。