Apply jQuery File Style plugin settings on newly created elements

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.

Here's my code :

<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 he开发者_开发技巧lp me?

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.

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

See it in action: http://jsfiddle.net/2Xv2e/

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

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

Swap out the order...append first then bind the plugin.

 $('#add').live('click',function() {
       $(this).parent().append('<p><input type="file" name="" id="" /></p>');

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



    });

Using jQuery Filestyle is more easy. http://markusslima.github.io/jquery-filestyle/

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