通过 ajax 加载 HTML/LINK 时，jQueryTOOLS 覆盖灯箱不起作用答案

【问题标题】：jQueryTOOLS Overlay lightbox not functioning when HTML/LINK is loaded via ajax通过 ajax 加载 HTML/LINK 时，jQueryTOOLS 覆盖灯箱不起作用
【发布时间】：2015-08-15 16:21:57
【问题描述】：

在开始之前，我研究并发现了这个类似的，以前的问题：Reinitialize jQuerytools Overlay on ajax loaded element

但是，该问题的“答案”建议使用 .live()。我尝试向我们jQuery 1.9 .live() is not a function 使用 .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 Overlay 灯箱：

    <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? //

            })
        })
    })
})

【问题讨论】：

大约五年前，开发人员放弃了 jQuery 工具。您可能希望重新考虑使用自 2010 年以来未使用过的不受支持的库。它可能只是与较新版本的 jQuery 不兼容。
考虑到这一点。你有推荐吗？
FancyBox 2。否则：google.com/…

标签： javascript jquery ajax overlay jquery-tools

【解决方案1】：

您可以在 ajax 函数的回调中调用覆盖绑定。另一件事是检查您的 jQuery 选择器，以确保您对它们进行了适当的配置，并且它们正在选择适当的元素来绑定您的事件。

根据 jQuery 文档：“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在于页面上。”

所以在我看来，在您的 AJAX 请求的回调中调用绑定功能将是可行的方法！也许如果你能提供你的代码的简化版本，包括 ajax 请求，那么我可以尝试再看看:)

【讨论】：

Ajax 按要求添加。
是的，如果您不想使用其他库，我认为只需将其添加到回调中（在 $.post("~ajax_url~",param,function(response) { 内）即可可能会修复它。即使它是一个过时的库，也不一定意味着它已经过时了。祝你好运！：D

【解决方案2】：

使用不同的解决方案。 jQueryTOOLS Overlay 不再活跃，并使用已弃用甚至消除的 jQuery 函数。尝试解决所有这些问题已被证明是低效的，而且就 AJAX 相关而言，使用最新版本的 jQuery 是不可能的。

正如@sparky FancyBox 2 所建议的那样，提供了所需的解决方案。实施起来简单直观。

【讨论】：