jQueryTOOLS Overlay lightbox not functioning when HTML/LINK is loaded via ajax

Question

Before starting, I have researched and found this similar, previous question: Reinitialize jQuerytools Overlay on ajax loaded element

However, the "answer" to that question suggests using .live(). I attempted to us jQuery 1.9 .live() is not a function to update using .on().

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

I will admit I don't 100% understand exactly what that is doing other than perhaps re-initializing the newly loaded HTML so that jQueryTOOLS Overlay has 'access' to the newly loaded HTML.

I have a page loading sections of HTML content via AJAX. Here is an example of one DIV that is loaded.

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

This has a link that should engage a jQuery and then load a jQueryTOOLS Overlay lightbox:

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

This is the jQuery I am using to load an external page into a Light Box: http://jquerytools.github.io/demos/overlay/external.html

It simply feels like it's not triggering the jQuery.

Here's what's in the header:

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

The jquery.browser.min.js is required by jQueryTOOLS Overlay to access browsers. https://github.com/gabceb/jquery-browser-plugin

EDIT:

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

You could call the overlay binding on the callback of your ajax function. The other thing would be is to check your jQuery selectors to make sure you have them configured appropriately and that they are selecting the appropriate element to bind your event to.

As per the jQuery documentation: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

so it does seem to me that calling the binding functionality in the callback of your AJAX request would be the way to go! Perhaps if you could provide a simplified version of your code, ajax request included then I could try and take another look :)

Answer 2

Use a different solution. jQueryTOOLS Overlay is no longer active and uses deprecated and even eliminated jQuery functions. Trying to solve all those issues has proven both inefficient and so far as AJAX is related, impossible with the latest versions of jQuery.

As suggested by @sparky FancyBox 2 provided the needed solution. It was simple and intuitive to implement.