從AJAX內容加載彩盒

首先，我對所有形式的javascript都很陌生，尤其是遠程AJAX。也就是說，在最後一天的過程中，我設法編寫了一個腳本，該腳本動態刷新單個div並將其替換爲另一個頁面上div的內容。從AJAX內容加載彩盒

但問題是，我的其他幾個腳本不能在ajax刷新的內容中工作。其中最重要的是「colorbox」。

今天晚上我花了幾個小時研究這個問題，並且看到很多關於.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。

這個問題還有第二部分。由於上面的代碼，我的圖片鏈接現在也受到hashtag的影響，這反過來又會阻止圖片本身在我應該想象的colorbox中正確加載。我怎樣才能防止這些圖像受到影響，並讓他們保持標準的URL。如果可能的話，我只想要上面的代碼來實現我的內部導航鏈接。

非常感謝的傢伙。我期待着你的回覆。

來源

2011-08-08 gordyr

這是很多代碼審查，所以我會首先關注事物的概念方面。也許你會給你一些線索......

這聽起來像當你通過Ajax加載內容的DOM改變了。不用擔心，這就是我們所期望的。但是，在Ajax調用之前加載的腳本可能會遇到困難，如果它們綁定到頁面加載時不在的元素或不再存在的元素。

JQuery's live函數是一個解決方案。 Live不是在特定的時間點綁定到特定元素（或元素集合），而是允許您指定對元素（或集合）的綁定，而不考慮它們何時顯示在DOM中（如果有的話）。然而，在其默認的「香草」中，ColorBox使用所有的摘要，我相信它們使用經典的DOM綁定 - 這意味着元素必須在綁定時出現。（因爲你不顯示你對ColorBox的調用，所以我看不到你是怎麼使用它的。）

你可能想考慮在Ajax加載每個內容後重新初始化ColorBox，以確保綁定發生在你的方式需要它。

來源

2011-08-16 20:15:17

感謝您的答覆隊友......我實際上設法解決了很多試錯後的問題。我顯然使事情變得複雜，因爲刷新後的重新初始化是所有需要的......正如你所建議的那樣。乾杯! – gordyr

使用$('selector').delegate()它觀察'選擇器'的DOM，並且.live()已被棄用。

使用這個來觀察你的元素並激發colorbox啓動。這樣，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']是指您點擊以激發colorbox的鏈接，無論它是否已經加載了最初的DOM或帶有AJAX請求，並已添加到DOM以現場時尚。即：任何標籤是這樣的：

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

來源

2012-01-24 19:01:40 Relic

這個問題已經有四個月的時間了，而且已經有另一張海報接受了答案。你確定你是在正確的地方？ –

從AJAX內容加載彩盒

回答

相關問題