jQueryTOOLS覆蓋收藏夾時HTML/LINK是通過AJAX加載不正常

Question

開始，我已經研究，發現這個類似，先前的問題之前：Reinitialize jQuerytools Overlay on ajax loaded element

然而，「答案」這個問題，建議使用.live（） 。我試圖使用.on（）更新我們的jQuery 1.9 .live() is not a function。

$(".overlay_load[rel]").on('click', 'a', function() { 
    $(this).overlay().load(); 
    $(this).overlay().load(); 
    return false; 
}); 

我承認我不是100％準確理解是，或許比重新初始化新加載HTML做其他的，這樣jQueryTOOLS覆蓋具有「訪問」，將新加載HTML。

我有一個頁面通過AJAX加載HTML內容的部分。這是一個加載的DIV的例子。

<div class="ajax-returned mytop"> 
    <span class="username"> drkwong </span> <br> 
    <span class="full-name">Andrew Kwong</span><br> 
    <span class="action-status"> 
     <span class="mt-icon ut3"></span> 
     <span class="autoship active">A</span> 
     <span class="view_profile"> 
      <a href="/member/downline_tree_view/?view=tree_profile&amp;program=1&amp;view_userid=13" rel="#overlay"> 
       <img src="/inc/downline_tree/images/more_info.png" rel="#13"> 
      </a> 
     </span> 
    </span> 
</div> 

<!-- overlayed element --> 
<div class="apple_overlay" id="overlay"> 
    <!-- the external content is loaded inside this tag --> 
    <div class="contentWrap"></div> 
</div> 

這樣做應該搞一個jQuery，然後加載jQueryTOOLS覆蓋收藏夾的鏈接：

<script> 
      $(function() { 
       // if the function argument is given to overlay, 
       // it is assumed to be the onBeforeLoad event listener 
       $("a[rel]").overlay({ 

        mask: 'grey', 
        effect: 'apple', 

        onBeforeLoad: function() { 

         // grab wrapper element inside content 
         var wrap = this.getOverlay().find(".contentWrap"); 

         // load the page specified in the trigger 
         wrap.load(this.getTrigger().attr("href")); 
        } 
       }); 
      }); 
    </script> 

這是jQuery的我使用到外部網頁加載到一個燈箱：http://jquerytools.github.io/demos/overlay/external.html

它只是覺得它不會觸發jQuery。

下面是在頭：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.browser.min.js"></script> 
<script type="text/javascript" src="/templates/public/2/downline/js/jquery.tools.min.js"></script> 

的jquery.browser.min.js由jQueryTOOLS覆蓋需要訪問瀏覽器。 https://github.com/gabceb/jquery-browser-plugin

編輯：

AJAX

var ids=new Array() 
var node 
var param={"action":"NodeDetailAll","admin":"1"} 
var users=new Array() 



function get_ids(){ 
    for(var i=0;i<nodes.length;i++){ 
     users.push("child_"+$(nodes[i]).attr("class")) 
     ids.push($(nodes[i]).attr("class")) 
    } 
} 

function get_nodes(){ 
    nodes = $("#chart [myattr*='descendent']") 
    nodes= jQuery.makeArray(nodes); 

    $.when(get_ids()).then(function(){ 
     $.each(ids,function(key,value){ 
      param[users[key]]=value 
     }) 
    })   
} 

function write_html(response){ 
    $.each(response,function(key,value){ 
     $("."+key).html(value) 
    }) 
} 

jQuery(document).ready(function() { 
    $(".spinner-loader").fadeIn(200) 

    $.when(get_nodes()).then(function(){ 

     $.post("~ajax_url~",param,function(response) { 

      response=jQuery.parseJSON(response) 
      $.when(write_html(response)).done(function() { 
       $(".spinner-loader").fadeOut(600) 
       $("#chart").css("opacity","1") 

       // is this where I would add the on()? // 
       // I tried that, without success. // 
       // perhaps I need to modify the on() function? // 

      }) 
     }) 
    }) 
}) 

Answer 1

使用不同的解決方案。 jQueryTOOLS Overlay不再活躍，並且使用不推薦使用的jQuery函數。試圖解決所有這些問題已被證明是效率低下的，只要AJAX與jQuery的最新版本不可能相關。

正如@sparky FancyBox 2提供了所需的解決方案。實施起來簡單直觀。

Answer 2

你可以把覆蓋在你的Ajax功能的回調結合。另一件事是檢查你的jQuery選擇器，以確保你有適當的配置，並且他們選擇適當的元素來綁定你的事件。

根據jQuery文檔：「事件處理程序僅與當前選定的元素綁定;它們在您的代碼調用.on（）時必須存在於頁面上。」

因此，在我看來，在您的AJAX請求的回調中調用綁定功能將是一種可行的方式！也許如果你可以提供你的代碼的簡化版本，包括阿賈克斯請求，那麼我可以嘗試再看看:)