Javascript 当通过ajax加载HTML/链接时，jQueryTOOLS Overlay lightbox不起作用

在开始之前，我研究并发现了类似的问题：

但是，该问题的“答案”建议使用.live（）。我试图使用.on（）更新我们

我承认，除了重新初始化新加载的HTML以使jQueryTOOLS Overlay能够“访问”新加载的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>

drkwong

Andrew Kwong

A.

这有一个链接，该链接应使用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>

$（函数（）{
//如果将函数参数指定给overlay，
//假定它是onBeforeLoad事件侦听器
$（“a[rel]”）。覆盖({
面具：“灰色”，
效果：“苹果”，
onBeforeLoad:function（）{
//抓取内容中的包装器元素
var wrap=this.getOverlay（）.find（“.contentWrap”）；
//加载触发器中指定的页面
wrap.load（this.getTrigger（）.attr（“href”）；
}
});
});

这是我用来将外部页面加载到灯箱中的jQuery：

它只是感觉它没有触发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覆盖需要jquery.browser.min.js来访问浏览器

编辑：

阿贾克斯

var id=new Array（）
变量节点
var param={“action”：“NodeDetailAll”，“admin”：“1”}
var users=新数组（）
函数get_id（）{
对于（var i=0；i，您可以在ajax函数的回调上调用覆盖绑定。另一件事是检查您的jQuery选择器，以确保已正确配置它们，并且它们正在选择将事件绑定到的适当元素

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

因此，在我看来，在AJAX请求的回调中调用绑定功能将是一个不错的选择！也许如果您可以提供一个简化版本的代码，包括AJAX请求，那么我可以尝试再看一看：）
使用不同的解决方案。jQueryTOOLS Overlay不再处于活动状态，并且使用不推荐的甚至已淘汰的jQuery函数。尝试解决所有这些问题已证明效率低下，而且就AJAX而言，最新版本的jQuery不可能解决这些问题

正如@sparky所建议的那样，它提供了所需的解决方案。实现起来简单直观。
开发人员大约在五年前就放弃了jQuery工具。您可能希望重新考虑使用自2010年以来从未接触过的不受支持的库。它可能只是与jQuery的较新版本不兼容。考虑到这一点。是否继续你有什么建议吗？否则：Ajax是按要求添加的。是的，如果你不想使用其他库，我认为只要将它添加到回调中（在$.post（“~Ajax_url~”，param，function（response）{）中）就可以修复它。即使它是一个过时的库，也不一定意味着它已经过时。祝你好运
<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>

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

            })
        })
    })
})