Question

In one of my HTML page dynamically loading some file field while clicking a button like follows

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


$('#files').append('<input type="file" class="myfile" name="myfile" />');


});

My question is how to “bind” newly added element to HTML page so that I can access like

$('.myfile').change(function(){
// Code Here
});

I am asking this because

$('.myfile').live('change',function(){
// Code here
});

not working in all browsers , expecially IE

Please help thanks

Answer 1

You should use .on() when you are using jQuery 1.7+ or .delegate() if lower.

http://jsperf.com/jquery-live-vs-delegate-vs-on

P.S. What version of IE are we talking about, because .live() should work (although slow as shit).

UPDATE

Demo for.delegate(): http://jsfiddle.net/PeeHaa/zqbBX/
Demo for .on(): http://jsfiddle.net/PeeHaa/ddJrs/