Issue with binding in jQuery for copied elements

Question

This is actually a bigger question because I know there are several ways to solve this problem but I will try to sum it up.

What I try to do: I am using this jQuery plugin to upload files via Flash http://www.uploadify.com/. However, the element #fileInput that I supposed to bind this function to is a live element which is generated after the page loaded: $('#fileInput').uploadify(). The reason #fileInput is a live element is because I use FancyBox to popup a DIV and this FancyBox basically just "cloned" the inner html of the DIV.

What happened: When I clicked "BROWSE" to upload a file, there is no progress bar for upload. The reason is because the Uploadify could not bind to live elements.

Questions: 1. I tried to replace bind() with live() in uploadify code but that did not work because bind() allows to pass [data]. The LiveQuery plugin http://docs.jquery.com/Plugins/livequery does not have the same syntax as bind() either. Is there anything similar to bind but works for live elements?

2. If I don't try to replace bind() function and keep uploadify code the same. Does anyone know how to change code in FancyBox so that it WILL NOT make a clone to generate live elements? I know this is a hard question too.

Note: FancyBox site seems dead --> http://www.visual-blast.com/javascript/fancybox-jquery-image-zooming-plugin/

Thank you very much!

Answer 1

You might consider changing the FancyBox code to support calling a callback function after it clones the HTML. Then, put the uploadify() call in the callback function.

Answer 2

You could overload the live method, making it support data as the second parameter:

jQuery.fn.live = (function(_live){
    return function( type, data, fn ) {

        var _fn;

        if ( jQuery.isFunction(fn) ) {
            _fn = function(e) {
                e.data = data;
                return fn.call( this, e );
            };
        }

        return _live.call( this, type, _fn || fn || data );
    };
})(jQuery.fn.live);

Replacing all instances of bind(...) with live(...) should now work.

Note: you'll have to put the overloaded method above everything else.

Answer 3

From my experience , the only way I have found to do this is by using livequery

It has a similar syntax, and in your case to bind uploadify on a live element, you would use

$('#fileInput').livequery(function(){
  $(this).uploadify();
})

Livequery accepts functions without events, and executes them everytime there is a change in the DOM

Answer 4

How is the element generated? If its fetched from the server using jQuery you can use a more hackish way of fixing it, simply put jQuery runs eval() on any script tags it runs into so you could just put:

<script type='text/javascript'>
$(function(){
    $('#fileInput').uploadify();
});
</script>

In the fetched html and it'll bind it on load instead of trying to watch over it live. Bonus points, if you fetch the html again it'll be unbound.