Question

I am trying to append a help icon to a file upload form field. That part is easy enough. However, the file upload field is also going to be a multiple file upload and I am using the jquery multifile plugin to do that. When the plugin loads, it turns the file input field into this:

<div class="MultiFile-wrap" id="MultiFile1_wrap">
<input type="file" name="attachments" class="multi MultiFile-applied"/>
<div class="MultiFile-list" id="MultiFile1_wrap_list"/>
</div>

Because the plugin wraps the file input field in a div, my help icon ends up dropping down a line. So, I think what I really want to do is append the help icon to the div.MultiFile-list element, but it does not exist when the page loads, so I don’t know how to append to it. I know you can do this kind of thing with live(), but it only seems to handle events, not elements.

Does anyone know how to do this? Here’s my jquery code:

var pConSel = "#portletContainer_999999";
var helpIcon = '<img src="img/icon_help.gif" width="16" height="16" alt="file upload help" title="File Upload Restrictions|Attachments are limited to no more than 10 files, must be 100 MB each or less, and are limited to PDF, text, Microsoft Word, Powerpoint or Excel formats." class="tool-tip" />';
jQuery("input[type=file]", pConSel).each(function(index) {
jQuery(this).after(helpIcon);
});

Answer 1

The answer to this was to not append the help icon until after the multifile plug-in had loaded and modified the DOM.

jQuery.getScript("js/multifile/jquery.MultiFile.pack.js", function() {
//add the help icons after the file upload fields
var helpIcon = '<img src="img/icon_help.gif" width="16" height="16" alt="file upload help" title="File Upload Restrictions|Attachments are limited to no more than 10 files, must be 100 MB each or less, and are limited to PDF, text, Microsoft Word, Powerpoint or Excel formats." class="tool-tip" />';
jQuery("input[type=file]", pConSel).each(function(index) {
jQuery(this).after(helpIcon);
});
});

Doing it this way works like a charm.