使用 jquery 将元素附加到动态元素

发布于 2024-11-08 16:28:08 字数 990 浏览 5 评论 0原文

我正在尝试将帮助图标附加到文件上传表单字段。这部分很简单。但是，文件上传字段也将是多个文件上传，我正在使用 jquery 多文件插件来执行此操作。当插件加载时，它会将文件输入字段变成这样：

<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>

因为插件将文件输入字段包装在 div 中，所以我的帮助图标最终会下降一行。所以，我认为我真正想做的是将帮助图标附加到 div.MultiFile-list 元素，但在页面加载时它不存在，所以我不知道如何附加到它。我知道你可以用 live() 来做这种事情，但它似乎只处理事件，而不处理元素。

有谁知道该怎么做？这是我的 jquery 代码：

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);
});

原文

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);
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谎言月老 2024-11-15 16:28:08

答案是在多文件插件加载并修改 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);
});
});

这样做就像一个魅力。

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.

回复收藏 0 原文

~没有更多了~