JQuery binding problem for copied elements

Question

This is a really big question, because I know that there are several ways to solve this problem, but I will try to summarize.

What I'm trying to do: I use this jQuery plugin to upload files via Flash http://www.uploadify.com/ . However, the #fileInput element with which I must associate this function is the live element that is generated after the page loads: $ ('# fileInput'). Uploadify (). The reason #fileInput is a live element because I use a FancyBox to pop up a DIV, and this FancyBox basically just “cloned” the internal html DIV.

What happened: when I pressed the "BROWSE" button to download a file, there is no progress bar for downloading. The reason is that Uploadify could not bind to live elements.

Questions: 1. I tried replacing bind () with live () in the uploadify file, but this did not work, because bind () allows you to transfer [data]. The LiveQuery plugin http://docs.jquery.com/Plugins/livequery does not have the same syntax as bind (). Is there anything similar to binding, but works for live elements?

2. Unless I try to replace the bind () function and keep the add code the same. Does anyone know how to change the code in FancyBox so that it does not make a clone to create live elements? I know this is also a tough question.

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

Many thanks!

Answer 1

You might want to modify the FancyBox code to support calling the callback function after cloning the HTML. Then add the uploadify () call to the callback function.

Answer 2

You can overload the live method by supporting 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); 

Now you need to change all instances of bind(...) with live(...) .

Note: you will have to overload the method above everything else.

Answer 3

In my experience, the only way I found this is to use livequery

It has similar syntax, and in your case, to bind uploaded to the live element, you should use

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

Livequery takes functions without events and executes them every time a change in the DOM occurs

Answer 4

How is an element generated? If it is extracted from the server using jQuery, you can use a more hacky way to fix it, just put jQuery to run eval () for any script tags that it runs in, so you can just put:

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

In the extracted html, and it will tie it to the download instead of trying to watch it live. Bonus points, if you get the html again, it will be unrelated.