在新创建的元素上应用jQuery File Style插件设置

我正在使用Mika Tuupola的文件样式插件 ,我想要做的是,使用jQuery将此插件应用于新创建的元素

这是我的代码:

$("input[type=file]").filestyle({ image: "choose-file.gif", imageheight : 22, imagewidth : 82, width : 250 }); $('#add').click(function() { $(this).parent().append('

'); });

当我点击“添加更多”按钮时,它显示如下:

在此处输入图像描述

那么,我做错了什么? 你能帮助我吗?

事实certificate,主要问题是插件。 它将提供的元素包装在设置为display: inlinedivdisplay: inline ,这就是为什么所有新文件元素都是内联的。

解决此问题的唯一方法是修改插件以添加外部包装器(就像您尝试执行的那样)。 下载未缩小的插件 ,找到如下所示的代码:

  $(self).before(filename); $(self).wrap(wrapper); 

然后让它看起来像这样:

  $(self).wrap("

"); $(self).before(filename); $(self).wrap(wrapper);

看到它在行动: http : //jsfiddle.net/2Xv2e/

 $(this).parent().after('

'); $('input[type=file]').filestyle({ image: "choose-file.gif", imageheight : 22, imagewidth : 82, width : 250 });

交换订单…首先附加然后绑定插件。

  $('#add').live('click',function() { $(this).parent().append('

'); $("input[type=file]").filestyle({ image: "choose-file.gif", imageheight : 22, imagewidth : 82, width : 250 }); });

使用jQuery Filestyle更容易。 http://markusslima.github.io/jquery-filestyle/

 $(":file").jfilestyle({ input: false, theme: "dark", iconName: "icon-plus", size: "250px" });