javascript - jquery的多个.load()事件冲突

Question

我已经用$('#result').load('test.php')文件加载了数据，这是完全正常的。

这是test.php屏幕截图

现在这是我在灯箱中加载的文件：

在我的test.php文件中，我还通过点击事件在灯箱中加载了另一个文件。灯箱与新加载的文件一起正确显示。这是调用灯箱的代码：

jQuery('#wt_opp_coll .coun').click(function(){
        jQuery(this).jpLightBox({
            width: 500,
            height: 250,
            url: 'components/content/test_file.php'
            //message: 'Just Testing the file'
        });
    });

有了这个，我新加载的文件test_file.php在灯箱中显示得很好，但我最后加载的文件test.php在灯箱上消失了，正如您在第二个屏幕截图中看到的那样，只有灯箱出现，而不是像第一个屏幕截图那样在背景中显示细节。

请帮助我停止消失我最后加载的文件（test.php）。

注意：我还使用.load()lightbox 中的函数来加载 url。

Answer 1

我没有对 LightBox 做任何事情，但问题可能是您要更换#wt_opp_coll .coun新的灯箱吗？

jQuery('#wt_opp_coll .coun').click(function(){
        jQuery(this).jpLightBox({
            width: 500,
            height: 250,
            url: 'components/content/test_file.php'
            //message: 'Just Testing the file'
        });
    });

第二行具有jQuery(this)向 parent 指示#wt_opp_coll .coun。所以我认为正在发生的是灯箱正在取代#wt_opp_coll .coun内容。

Answer 2

我不能告诉你是什么导致了这个奇怪的问题，但我前段时间也遇到了问题。我解决它的方法是使用 livequery 来处理我的点击事件。不要问我为什么，我已经浏览了几个小时的库和文档，并试图从其他人那里找到答案但无济于事。

试一试，如果您使用 livequery 没有问题，它可能是您的解决方案。

这是我的代码片段，它用于多达 50 个不同的加载调用实例，所有这些实例都有效。有些链接也是由其他加载的数据动态创建的。

function ajaxContent(link, sel, reg, extReg) {
$(sel).not(link).removeClass("active");
$(link).addClass("active");

var toLoad = $(link).attr('href')+ ' ' + extReg;

$(reg).fadeOut('slow',loadContent);

function loadContent() {
    $(reg).load(toLoad,'',showNewContent())
}

function showNewContent() {
    $(reg).delay(200).fadeIn('slow');
}

}

$(document).ready(function() {

// Top left "main" nav
$('#jax-nav li a').livequery("click", function(event) {
    ajaxContent(event.target, '#jax-nav li a', '#page-content', '#ajax-out');
    return false;
});    

Answer 3

尝试在您的 html 上为灯箱放置一个空 div

<div id="lightBoxDiv"></div>

并编辑您的代码

jQuery('#wt_opp_coll .coun').click(function(){
        jQuery("#lightBoxDiv").jpLightBox({
            width: 500,
            height: 250,
            url: 'components/content/test_file.php'
            //message: 'Just Testing the file'
        });
    });

您还需要在关闭按钮上刷新此 div 的内容，否则它将影响您的基本 html

将此代码放在关闭按钮中

$("#lightBoxDiv").html('');