How do I bind the Overlay Tool for new Ajax elements in Jquery?

I'm using:

echo $javascript->link('tools.overlay-1.0.4', false);

which is initialized with:

$(".overlay_popup").overlay({
    expose: '#000000',
    close: '.close_overlay',
    finish: {
        top: 'center',
        left: 'center',
        absolute: false
    }
});

I call the overlay popup box like this:

echo $html->link(
    "add part",
    array('controller'=>'garage_parts',
        'action'=>'addfrompartlist',
        $gcar['GarageCar']['id'],
        $gcar['GarageCar']['car_id']),
    array('class'=>'js-ajax overlay_popup',
        'id'=>'add_part_overlay',
        'rel'=>'.overlay_container')
);

This all works fine and dandy, however I have an ajax function that dynamically adds the 开发者_运维百科"add part" hyperlink button shown above and I have no idea how to bind this new button to the overlay. Normally, I would use something like this:

$(".overlay_popup").bind("click", function(){... but this didn't work for the overlay. Any ideas on how I can successfully do this?

Another thing to try for dynamically added links, inspired by Csongor:

var Overlay = $(".overlay_popup").data("overlay");
$(".overlay_popup").overlay(Overlay.getConf());

Why don't you use the API.load in the click event?

http://flowplayer.org/tools/overlay.html

var overlayDiv = $(".overlay_popup").overlay({expose: '#000000', close: '.close_overlay',   finish: { top: 'center', left: 'center', absolute: false }});

$(".overlay_popup").bind("click", function(){overlayDiv.load();})

Use the jQuery live( type, fn ) method.

$(".overlay_popup").live("click", function(){...}) binds your handler to all currently matched elements but also to all new elements, which match your selector, too.

i have a solution, sorry for my bad english...

this is de solution:

in the librarie tools.overlay-1.1.2.js add the next code before of function overlay():

 $.fn.addObjectToOverlay = function(element, confOverlay){
  el = new Overlay($(element), confOverlay);
  instances.push(el);
  $(this).data("overlay", el);
 };

 // jQuery plugin initialization
 $.fn.overlay = function(conf) {  

then you have to call the function like this

$('#avisoFav').remove();
$video = $(respuesta);
$video.css("display", "none");
$("#contenidoFav").append($video);
$.each($video.find('.linkRMTP'), function (index, obj){
 $video.addObjectToOverlay(obj, confOverlay);
});
$video.slideDown('fast');

the variable "confOverlay" is the configuration of my overlay, example:

confOverlay = { 
   effect: 'drop', 
   expose: '#789',
   top:25,
   closeOnClick : false,
   fastInSpeed : 'fast',
   onBeforeLoad: function(){
    idVideo = $(this.getTrigger()).attr("idVideo");
    idiomaActual = $(this.getTrigger()).attr("idiomaActual");
    onBeforeLoad(idVideo, idiomaActual);
   },
   onLoad: function(){
    $("#contenedorVideo > *").remove();
    url= $(this.getTrigger()).attr('link');
    onLoaded(url);
   },
   onClose: function (){
    $("#contenedorVideo > *").remove();
   }
  };

so thats all that you have to do for the overlay worked with new create elements in real time.

Atte. Salvador Romero

Sorry for answers late change the function with this code

$.fn.addObjectToOverlay = function(element, confOverlay){ 
    if ($.isFunction(confOverlay)) {
        conf = {onBeforeLoad: confOverlay}; 
    }

    var globals = $.extend({}, $.tools.overlay.conf); 
    confOverlay = $.extend(true, globals, confOverlay);
    el = new Overlay($(element), confOverlay);
    instances.push(el);
    $(this).data("overlay", el);
    return confOverlay.api ? el: this;
};