Cannot bind input event to jQuery multifile from dynamically loaded form

Question

I am getting strange behaviour when trying to upload files, using jQuery multi-file plugin, from a dynamically loaded form.

I'm using Firefox 9.0.1/Mac

This is how I am trying to bind to the change event: I have tried blur as well (and click and...)

$('#newticketform').live('change',function (e){ //newticket form is the form in which my input type=file is contained       
         $('#my_file_element').MultiFile(); //my_file_element is the input type=file element
});

Should the binding be to the form or input field? I did try both without any difference in behaviour.

When using .on instead of .live the function above is not triggered at all.

I've managed to upload files before loading the form as dynamic content. When loading the form into my main page I have to, of course, bind the event in some way.

This is the what happens:

1st time: Nothing happens (but he function above is triggered, confirmed using alert). I.e. no file is attached to the lista of files to be uploaded.
2nd time: The file is added to the list.

It seems like the binding is not realised before the first time I try to add a file and the second time it's working.

Just in case I'm including the html as well:

<form method="post" enctype="multipart/form-data" id="newticketform">
        <input type="hidden" value="2000000" name="MAX_FILE_SIZE">
        <label for="title">Rubrik</label> <input type="text" name="title" id="title"><br><br>
                 <label for="description">Beskrivning</label> <textarea name="description" id="description" cols="50" rows="15"></textarea><br> 

                 <input type="file" maxlength="5" name="file[]" id="my_file_element" class="multi">
                 <div id="files_list"></div>
                 <input type="submit" value="Upload" name="upload"> 
 </form>

Tested this after feedback from Jasper below:

$("#newticketmenu").live('click',function(event){
          $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket/newticket.php", function(){
                $('#newticketform').on('change', '#my_file_element', function (){     
                    $(this).MultiFile();
                })
                addNewTicketValidation();                                          
          });
      });

Still, exactly the same behaviour.

All JavaScript files are loaded together with the main page.

What am I doing wrong? Is my way of binding incorrect?

Thanks!

I'm using 1.7.1. Any problems? Since you asked I made a quick test with 1.6.2 as well to see if something had changed, but still the same result. — Nicsoft, Jan 23 '12 at 15:07

score 1 · Accepted Answer · edited Jan 24 '12 at 07:48

Well the plugin MultiFile needs to be called before the user interacts with the file input. You should call the MultiFile plugin on the element as soon as it is added to the DOM.

I'm not sure how you are dynamically adding the form to the page but here's a stab at it:

$.ajax({
    url     : '<url>',
    success : function (serverResponse) {
        $('#my-form-container').html(serverResponse).find('#my_file_element').MultiFile();
    }
});

On a side-note, your code seems to be binding to a form for the change event, which is supposed to be bound to input elements within a form. You could try this:

$('#my-form-container').delegate('#my_file_element', 'change',function (){     
    $(this).MultiFile();
});

Notice I used .delegate() instead of .live() as the latter has been depreciated as of jQuery 1.7. If you are using jQuery 1.7+ then you can use .on() in a similar fashion to delegate event handling:

$('#my-form-container').on('change', '#my_file_element', function (){     
    $(this).MultiFile();
});

Notice that the order of the parameters for .delegate() and .on() are different.

Docs for .on(): http://api.jquery.com/on
Docs for .delegate(): http://api.jquery.com/delegate

If you are setting the event binding inside the callback function (which you are according to your example) for you AJAX request, then you don't need to use event delegation, you can just run the plugin on the element directly after you add it to the DOM:

    $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket
              /newticket.php", function(){ 
              $('#my_file_element').MultiFile(); 
              addNewTicketValidation(); 
    });

Thank you. I tried both your suggestion for .on and .delegate. I update my post with this information, there you can see how the content is loaded as well. Unfortunately, no difference in behaviour. Using .live when loading the content but that part works so no problem, will change later due to the deprecation. — Nicsoft, Jan 23 '12 at 19:05
If you are setting the event binding inside the callback function for you AJAX request, then you don't need to use event delegation, you can just run the plugin on the element directly after you add it to the DOM: `$("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket/newticket.php", function(){ $('#my_file_element').MultiFile(); addNewTicketValidation(); });` — Jasper, Jan 23 '12 at 19:43
THANK YOU! This works :) I think I need to study event binding a bit... I updated your answer with this information. — Nicsoft, Jan 24 '12 at 07:40

Cannot bind input event to jQuery multifile from dynamically loaded form

1 Answers1