jquery - 替换文件输入类型=“文件”按钮的功能有效，但要求文件两次

Question

使用 jQuery Mobile 1.7.1 替换 native 的按钮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/