通過Ajax加載HTML / LINK時，jQueryTOOLS重疊式燈箱不起作用

Question

在開始之前，我已經研究並找到了類似的先前問題： 重新初始化jQuerytools在ajax加載的元素上覆蓋

但是，對該問題的“答案”建議使用.live（）。 我嘗試向我們提供jQuery 1.9 .live（）不是使用.on（）更新的功能 。

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

我會承認，除了重新初始化新加載的HTML以便jQueryTOOLS Overlay可以“訪問”新加載的HTML之外，我不是100％確切地了解正在做什么。

我有一個頁面通過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>

jQueryTOOLS Overlay需要使用jquery.browser.min.js來訪問瀏覽器。 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

您可以在ajax函數的回調中調用覆蓋綁定。 另一件事是檢查您的jQuery選擇器，以確保已正確配置它們，並選擇了將事件綁定到的適當元素。

按照jQuery文檔的規定：“事件處理程序僅綁定到當前選定的元素；在代碼調用.on（）時，它們必須存在於頁面上。”

因此在我看來，在您的AJAX請求的回調中調用綁定功能將是可行的方法！ 也許如果您可以提供代碼的簡化版本，包括ajax請求，那么我可以嘗試再看看:)

Answer 2

使用其他解決方案。 jQueryTOOLS Overlay不再處於活動狀態，並使用已棄用甚至取消的jQuery函數。 就所有這些問題而言，試圖解決所有這些問題都被證明效率低下，而且就AJAX而言，這是最新版本的jQuery無法實現的。

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