在新创建的元素上应用jQuery File Style插件设置 [英] Apply jQuery File Style plugin settings on newly created elements

问题描述

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

I'm using Mika Tuupola's File Style Plugin and what I want to do is, apply this plugin to newly created elements with jQuery.

这是我的代码:

<p><input type="file" name="" id="" /></p> 
  <p><button id="add">Add More...</button></p>


  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="http://www.appelsiini.net/download/jquery.filestyle.mini.js"></script>
  <script type="text/javascript">

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


     $('#add').click(function() {

      $(this).parent().append('<p><input type="file" name="" id="" /></p>');

    });

  </script>

当我单击添加更多"按钮时，它显示如下:

and when i click "add more" button, it displays like this:

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

so, what I'm doing wrong? can you help me?

推荐答案

事实证明，主要问题是插件.它将提供的元素包装在设置为display: inline的div中，这就是所有新文件元素都是内联的原因.

Turns out that the main problem is the plug-in. It wraps the provided element in a div that is set to display: inline that's why all of the new file elements are inline.

解决此问题的唯一方法是修改插件以添加一个外部包装器(例如您要执行的p).下载非缩小插件，并找到如下所示的代码:

The only way to fix this is to modify the plugin to add an outer wrapper (like the p that you're trying to do). Download the non minified plugin and find the code that looks like this:

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

然后使它看起来像这样:

then make it look like this:

        $(self).wrap("<p/>");
        $(self).before(filename);
        $(self).wrap(wrapper);

查看实际运行情况: http://jsfiddle.net/2Xv2e/

这篇关于在新创建的元素上应用jQuery File Style插件设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！