<a href="javascript:void(0)" id="select-handler">select</a>
<input type="file" id="real-file-input" style="display:none" />

$('#select-handler').click(function(){
    $('#real-file-input').click(); 
});

$('#real-file-input').bind('propertychange', function(){
    alert('changed');
});

it's weird that when I use .click() the propertychange won't be fired.

<a href="javascript:void(0)" id="select-handler">select</a>
<input type="file" id="real-file-input" style="display:none" />

$('#select-handler').click(function(){
    $('#real-file-input').click(); 
});

$('#real-file-input').bind('propertychange', function(){
    alert('changed');
});

it's weird that when I use .click() the propertychange won't be fired.

• javascript
• jquery
• internet-explorer
• events

Share Improve this question Follow edited Aug 26, 2013 at 4:12 wong2 asked Aug 26, 2013 at 4:03 wong2wong2 35.8k5151 gold badges137137 silver badges182182 bronze badges 7

• Have you tried this with the .on() method? According to the docs, it's been the preferred method to use for this purpose since jQuery 1.7. – Surreal Dreams Commented Aug 26, 2013 at 4:14
• @SurrealDreams we are using jQuery 1.4 – wong2 Commented Aug 26, 2013 at 4:17
• Just clicking on an input type="file" doesn't change any property, hence onpropertychange won't be fired. – Teemu Commented Aug 26, 2013 at 4:23
• @Teemu but then I selected a file, the value of the input should be changed, so onpropertychange should be fired – wong2 Commented Aug 26, 2013 at 4:24
• Why not use cross-browser onchange instead of IE-only onpropertychange? – Teemu Commented Aug 26, 2013 at 5:03

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

Actually your code works fine in IE7 and 8 for me, whenever I change a value of input type ='file', the alert is fired. Whereas it is not working in >IE9 versions.

From paulbakaus's blog on propertychange on Internet Explorer 9

What’s wrong with propertychange on IE9?

1. IE9 doesn’t fire non-standard events when binding them through addEventListener. Every modern JS library that uses feature detection, including jQuery, will fail (see also: http://bugs.jquery./ticket/8485). “Not a biggie” you say, “simply use attachEvent directly” you say?

2. The good news: propertychange fires when using attachEvent. The bad news: It refuses to fire when modifying any CSS properties on the element that are unknown to the engine.. “Well this sucks,” you say, “but I read you can use DOMAttrModified on IE9!” you say?

3. DOMAttrModified features exactly the same behavior. It does not fire for unknown CSS properties. This is a plete disaster.

Many developers faces the same weird behavior.

Why do you want to use onpropertychange which is supported only by Internet Explorer?

I would rather move on to change event handler

$('#real-file-input').bind('change', function(){
    alert('changed');
});

or if it is a HTML5 then input event handler.

$('#real-file-input').bind('input', function(){
    alert('changed');
});

Unfortunately, IE9 doesn't support the "input propertychange" event on deleting. Escape, Delete and Backspace can be easily captured using the "keyup" event with event.which, but the selection of a text and deleting through right click -> delete does not fire the events propertychange, change, select or keyup/keydown.

I found no solution so far for this problem.

here's my code:

$('#search_input').on("propertychange input", function(event){
  console.log('propertychange event');
  // trigger search
});
$('#search_input').on("keyup", function(event){
  console.log('keyup event', event.which);
  if(event.which === 27) { // on ESC empty value and clear search
    $(this).val('');
    // trigger search
  } else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
    // trigger search
  }
});
$('#search_input').on("change input", function(event){
  console.log('change event');
  // trigger search
});
$('#search_input').on("select input", function(event){
  console.log('select event');
  // trigger search
});