替换文件输入类型="文件"按钮的功能有效,但要求文件两次

Question

使用jQuery Mobile 1.7.1替换本机按钮input type="file".

代码有效但强制在浏览/打开文件位上发出第二个请求.

我错过了什么？

Chrome和FF上的行为相同(尚未尝试其他地方).

<div id="fileInputButton"  data-role="button" data-icon="gear" style="width:150px;margin:0 auto; text-align:center">Import</div>

<div id="filename"></div>

<input style="opacity:0;" id="the_real_file_input" name="foobar" type="file">

 <script>
  $('#fileInputButton').click(function() {
    $('#the_real_file_input').click();
  });

  $('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
  }).change();
 </script>

谢谢你的帮助!

更新:在这个小提琴http://jsfiddle.net/pg3Qf/中正常工作,直到应用JQuery Mobile.(谢谢@wirey!)

最终更新:这解决了双触发问题:

$('#fileInputButton').click(function(e) {
     e.stopImmediatePropagation();
     $('#the_real_file_input').click();
 });

而且,这修复了Chrome和Safari中的"C:\ fakepath"问题:

str = $(this).val().replace(/C:\\fakepath\\/i, '');

Answer 1

我不知道为什么但是使用stopImmediatePropagation会阻止它触发两次.看起来事件不会冒泡

$('#fileInputButton').click(function(e) {
     e.stopImmediatePropagation();
     console.log('triggered');
     $('#the_real_file_input').click();
 });

http://jsfiddle.net/pg3Qf/3/