Question

首先，我对所有形式的javascript都很陌生，特别是远程AJAX。也就是说，在最后一天的过程中，我设法编写了一个动态刷新单个div的脚本，并将其替换为另一个页面上div的内容。

然而问题是我的其他几个脚本在ajax刷新的内容中不起作用。其中最重要的是“彩盒”。

我今晚花了好几个小时来研究这个，并且看到很多关于.load，.live ...更新DOM等刷新等等......但是老实说大部分都是这样的目前在我头上，我不知道从哪里开始将它与我目前的代码集成。

我的Ajax刷新代码如下（如果我没有使用最佳实践，我很抱歉，这是我的第一次尝试）： -

$(function()  {

$(".artist li.artist").removeClass("artist").addClass("current_page_item");
$("#rightcolumnwrapper").append("<img src='http://www.mywebsite.com/wp-content/images/ajax-loader.gif' id='ajax-loader' style='position:absolute;top:400px;left:190px;right:0px;margin-left:auto;margin-right:auto;width:100px;' />");

var $rightcolumn = $("#rightcolumn"),       
    siteURL = "http://" + top.location.host.toString(),     
    hash = window.location.hash,
    $ajaxSpinner = $("#ajax-loader"),
    $el, $allLinks = $("a");
            $ajaxSpinner.hide();


$('a:urlInternal').live('click', function(e) { 
    $el = $(this);
    if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {         
        var path = $(this).attr('href').replace(siteURL, '');
        $.address.value(path);
        $(".current_page_item").removeClass("current_page_item");
        $allLinks.removeClass("current_link");
        $el.addClass("current_link").parent().addClass("current_page_item");
        return false;
    }

    e.preventDefault();

});  

$.address.change(function(event) {      
    $ajaxSpinner.fadeIn();
    $rightcolumn.animate({ opacity: "0.1" })
    .load(siteURL + event.value + ' #rightcolumn', function() {
        $ajaxSpinner.fadeOut();
        $rightcolumn.animate({ opacity: "1" });
    });
});});

我希望有人能够向我展示我需要对上面的代码进行哪些修改，以便在刷新#rightcolumn的内容时加载colorbox。

这个问题还有第二部分。由于上面的代码，我对图片本身的链接现在也受到主题标签的影响，这反过来又会阻止图像本身在我想象的颜色框中正确加载。如何防止这些图像受影响，让它们保持标准URL。我只希望上面的代码尽可能影响我的内部导航链接。

非常感谢你们。我期待着你的回复。

Answer 1

这是需要审核的大量代码，因此我将首先关注事物的概念方面。也许你会给你一些线索......

听起来，当您通过Ajax加载内容时，DOM会发生变化。不用担心，这就是我们所期望的。但是，如果在Ajax调用之前加载的脚本绑定到页面加载时不存在的元素或者不再存在的元素，则可能会遇到困难。

JQuery的 live 功能就是一个解决方案。 live不允许在特定时间点绑定到特定元素（或元素集合），而是指定对元素元素（或集合）的绑定，而不考虑它们何时出现在DOM中（如果有的话）。 / p>

然而，ColorBox在其默认的“vanilla”中使用的摘要全部消失，我相信，它使用经典的DOM绑定 - 这意味着元素必须在绑定时出现。（由于您没有显示对ColorBox的调用，我无法看到您如何使用它。）

您可能需要考虑在Ajax每次加载内容后重新初始化ColorBox，以确保以您需要的方式进行绑定。

Answer 2

使用$('selector').delegate()它会监视“选择器”的DOM并且不推荐使用.live()。

使用它来观察你的元素并启动彩盒启动。这样，colorbox不依赖于DOM元素，反之亦然。

$("body").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

这基本上可以解决您的问题并且经过浏览器测试。委托闭包中的a [rel ='lightbox']是对您点击以启动颜色框的链接的引用，无论它是使用初始DOM还是使用AJAX请求加载并且已添加到DOM中以现场的方式。即：任何这样的标签：

<a rel='lightbox' href="http://some.website.com">Launch Colorbox</a>

从AJAX内容中加载colorbox

2 个答案: