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
– Nicsoft, Commented Jan 23, 2012 at 15:07

Nicsoft · Accepted Answer · 2012-01-24 07:48:23Z

1

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

edited Jan 24, 2012 at 7:48

Nicsoft

3,7229 gold badges44 silver badges71 bronze badges

answered Jan 23, 2012 at 17:47

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicsoft Over a year ago

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.

Jasper Over a year ago

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

Nicsoft Over a year ago

THANK YOU! This works :) I think I need to study event binding a bit... I updated your answer with this information.

Collectives™ on Stack Overflow

Cannot bind input event to jQuery multifile from dynamically loaded form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related