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

时间:2012-07-31 08:23:06

标签: javascript jquery

我已使用$('#result').load('test.php')文件加载数据,该文件完全正常。

这是test.php屏幕截图 enter image description here

现在这是我在灯箱中加载的文件: enter image description here

在我的test.php文件中,我还在点击事件的灯箱中加载了另一个文件。灯箱在新加载的文件中正确显示。这是调用lighbox的代码:

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)。

注意:我还在lighbox中使用.load()功能来加载网址。

3 个答案:

答案 0 :(得分:0)

我没有对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),表示父#wt_opp_coll .coun。所以我认为正在发生的事情是灯箱正在取代#wt_opp_coll .coun内容。

答案 1 :(得分:0)

我无法告诉你是什么导致了这个奇怪的问题,但我还有一个问题。我解决它的方法是使用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;
});    

答案 2 :(得分:0)

尝试在你的html for lightbox上放置一个空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('');