为什么$（'＃file-input'）。click（）在浏览器控制台中调用时不会打开文件输入对话框？

Question

I found this fiddle: http://jsfiddle.net/QVAC7/ which help me to open the file input dialog. The idea is simple:

HTML :

<button id="id">Open</button>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />

JS :

$('#id').on('click', function() {
    $('#yourinputname').trigger('click');
});

The code works fine, when I click the button, a dialog showed up.

But there is a strange thing that when I enter the same command to the Chrome console, the dialog did not show up.

$('#yourinputname').trigger('click');

Is there any reason for this?

Answer 1

If you're using the console to try and find the jQuery object associated with $('#yourinputname') inside the JSFiddle, you won't find it because the JSFiddle's "Result" section is located inside an iFrame, which contains this code's "Result" in a secondary document outside the scope of the JSFiddle app.

You won't be able to run code from the console in this manner until you take the important code from this Fiddle, insert it into a page somewhere, and run it yourself.