如何確保ajax使用.load

完全加載內容我們有一個網站，左側顯示我們的產品，右側顯示用戶點擊的產品（同一頁面上）。當頁面加載時，默認情況下我們有第一個產品顯示在右側，當用戶點擊一個新產品時，右側列會更改以顯示新產品（通過ajax）。如何確保ajax使用.load

這裏是我有AJAX設置：

<script> 
jQuery(document).ready(function($){ 
    var defaultValue = $("ul.products li.shop-thumb a:first").attr("href"); 

    $(".main").load(defaultValue); 

    $("ul.products li.shop-thumb a").click(function(e){ 
     e.preventDefault(); 

     var addressValue = $(this).attr("href"); 
     //alert(addressValue); 
    $(".main").load(addressValue); 

    //$("a.woocommerce-main-image").addClass("image-popup-no-margins"); 

    }); 

}); 
</script>

我們用莊重的彈出窗口顯示該產品的大圖當用戶點擊（右側）主要產品圖片。

這對第一個（默認）產品非常適用，但是當用戶點擊新產品並且右側的內容發生變化時，用戶點擊主圖像，彈出窗口無法加載。換句話說，它在第一次加載頁面並顯示默認產品時起作用，但在單擊新產品時無法觸發。

這裏是產品image.php過濾器，只是增加了我們班的圖像彈出，無邊際的：

apply_filters('woocommerce_single_product_image_html', sprintf('<a href="%s" itemprop="image" class="woocommerce-main-image image-popup-no-margins" title="%s">%s</a>', $image_link, $image_title, $image), $post->ID);

而在頁腳，我們有這樣的：

$('.image-popup-no-margins').magnificPopup({ 
     type: 'image', 
     closeOnContentClick: true, 
     closeBtnInside: false, 
     fixedContentPos: true, 
     mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side 
     image: { 
     verticalFit: true 
     }, 
     zoom: { 
     enabled: true, 
     duration: 300 // don't foget to change the duration also in CSS 
     } 
    });

林可能在這裏提供了太多的信息，但是我感覺好多了，然後抱歉，所以如果我給你一個鏈接讓你明白我的意思，那麼或許它會更好。當你訪問該頁面時，點擊右側的大圖，你會看到彈出窗口的功能。現在嘗試點擊左側的其中一個產品，以便右側的主圖像發生變化並嘗試再次點擊，默認行爲發生，而不是彈出。

我檢查了類，一切看起來都很好，我相信它與ajax有關，但無法解決問題。

更新： 更多擺弄之後，我認爲這個問題是點擊錨當.load不是「重裝」的內容。就像我說的那樣，當你第一次加載頁面並點擊第一張圖片時，它會起作用，但當你更改圖片並調用ajax時，我不認爲它真的重新加載主容器中的內容。我如何確保ajax在第一次打開頁面時就像完全加載內容一樣？如果您訪問該網站並點擊右側的大圖片，它會起作用，通過點擊左側的產品來更改圖片，彈出功能無法正常工作，「標籤」彈出窗口也可能會顯示出來......也許這種方式較少特定於大型彈出窗口和更多的基本ajax

來源

2014-03-05 Derek

其實如果我什麼無焦點有趣的，然後重點窗口（即開關標籤離開和返回）它適用於新的右手內容 – clancer

當你在左側點擊圖片時你在控制檯中有錯誤 – MamaWalter

嗯似乎關注的事情是不相關的..實際上它只是需要時間來加載內容。。一旦他們完成它的工作..試着用螢火蟲看 – clancer

看來你的服務器只是非常慢，並提供新的彈出窗口所需的內容。您可以通過查看螢火蟲控制檯來查看獲取請求。一旦這些完成，它完美的作品。我建議升級主機或尋找另一種更快速提供更高質量圖像的方式，如imgur或其他圖像託管服務。

來源

2014-03-05 00:55:46 clancer

感謝我們正在將所有映像遷移到S3服務器 – Derek

我在Firebug中檢查了控制檯並等待請求完成 - 請求完成後仍然無法工作... – Derek

嗯..您的網站絕對可用我的電腦，firefox 27.0.1 – clancer

-1

所以，問題確實與莊重的彈出窗口中，用的fancybox取代它和所有似乎是正確的功能 - 感謝您的幫助球員

來源

2014-03-05 16:04:42 Derek

如何確保ajax使用.load

回答

相關問題