I’m trying to use Valum’s file upload script ( http://valums.com/ajax-upload/ ) to allow the creation of links that allow file uploads.
I’m using the jQuery library.
It’s simple to get one link on a page to work using the standard documentation, but now I want to be able to catch all links of a given class rather than statically assigning to a given element.
Futhermore my site uses Ajax pageloads so I need to be able to somehow assign the uploader to new Ajax loaded content.
The envisaged use is to allow creating a link like this in an Ajax loaded page and have it trigger the uploader:
<a href="#" class="uploader">Upload a file</a>
My first thought is to use the jQuery live() method to try bind the class, but I can’t find a suitable event to trigger on.
Has anybody had experience with this sort of issue?
No, it’s not so easy with
<input type="file">, unfortunately. Because of some security issues, IE (even IE9!) just doesn’t let you sumbit the form with this element “fiddled” – when ‘click’, ‘change’ or any other event is raised on it artificially.So this plugin works different. Instead of creating an event handler that ‘reroutes’ user clicks to some fileinput element created on the fly, the wrapper structure is created around the link given as its target – and fileinput is inserted right there, being hidden enough for a user to not see it – but enough for a browser to register clicks on it (check this method in the source code and this article for details).
The bottom line is, you can’t use event handling delegation here: the only sensible way is wrapping the newly-created elements with that plugin as well.