文件对话框在jQuery UI对话框中未显示。

Question

我有一个包含<form>和<input type=file>的jquery-ui-dialog。

对于一些用户，当他们点击打开文件对话框的按钮时，它并没有出现。问题不是基于浏览器，因为遇到这个问题的计算机使用所有安装的浏览器都无法打开文件对话框，如Chrome、Firefox和Internet Explorer。

问题也不是基于操作系统，因为我已经在以下操作系统中遇到了此问题：

• Windows XP • Windows 7 • Kubuntu 11.04

我已经在这些操作系统上安装了虚拟机，文件对话框完美运行。

所以我的问题是：有人知道这到底是怎么回事吗？

以下是代码：

<meta charset="utf-8">

    <link rel="stylesheet" href="http://matchfwd-statics.s3-website-us-east-1.amazonaws.com/asset_cache/css/e1b34bd841d9.css" type="text/css" media="all"> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>

    <script>

      $(function() {
         $( "#dialog-form" ).dialog({
           autoOpen: false,
           height: 500,
           width: 550,
           modal: true,
           buttons: {
             "Send": function() {
              $( this ).dialog( "close" );
           },
           Cancel: function() {
             $( this ).dialog( "close" );
           }
           },
           close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
           } });

       $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); });
       });
 </script>
 <div class="demo">

  <div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form class="main-form" method="post" action="" enctype="multipart/form-data">
        <h3>Fill in some details</h3>
        <span class="title">Your profile will be submitted with your application:</span><br/>
        <div class="holder" style="position:relative;top:12px"><a style="color:#24c2c9;" href="></a></div>
        <br>
        <span class="title">Why would you be the right candidate?</span><br/>
        <div class="holder"><textarea class="" name="description" cols="58" rows="10"> </textarea></div>
        <span class="note"></span>
        <span class="title">Attachments&nbsp;<a href="#" id="add_attachment" class="plus">&nbsp;</a></span>
        <div id="attachments" class="holder"></div>
    </form>
</div>

<button id="create-user">Create new user</button>

<script type="text/javascript">
(function() {
   var counter=1;
   $("#add_attachment").click(function(e){
   e.preventDefault();
   var attachmentString = 'attachment-'+counter
   var inputString = '<input type="file" name="'+attachmentString+'" id="id_'+attachmentString+'" />'
   $(inputString).appendTo("#attachments")
   counter = counter+1
   })})();
 </script>

- Julien Grenier

---

如果您能友好地展示受影响的代码区域以及脚本，或许我们就可以了解发生了什么。 - ace

不，这种情况发生在多台计算机上。一台旧的P4电脑使用XP系统，一台新的Windows 7笔记本电脑和一台运行Kubuntu系统的净书。但是Ubuntu的情况很奇怪，因为那个人重新启动了电脑（原因未知），然后它就可以工作了...唯一的问题是，在“应用”弹出窗口中单击附件时，会出现文件对话框。在某些计算机上，文件对话框不会出现。 - Julien Grenier

啊，这只是一个简单的<input type="file">，对吧？它发生在我的Google Chrome（14.0.835.29 dev）上，它不会打开文件对话框。但是Firefox正常工作。 - ace

有什么解决方案吗？如果我告诉用户切换浏览器，他们可能不会感激:) 在我的机器上（mac os x）使用任何我能想到的浏览器都可以正常工作。 - Julien Grenier

感谢William进行测试。这是我遇到的最奇怪的错误之一，因为它不基于浏览器或操作系统。它似乎会随机影响某些计算机。在这些计算机上，该错误跨越所有浏览器。 - Julien Grenier

Answer 1

我刚刚遇到了这个问题（在OSX上使用Chrome），并找到了你的问题。因为你没有找到答案，所以我决定做一些疯狂的事情。

$（"input.file"）。live（'click'，function（element）{element.click（）}）;

...这实际上解决了问题。请注意，如果在click（）后面放置一个;，它会报错，说元素没有click方法。

我不知道为什么这样做可以解决问题。这是我实施过的第二个最糟糕的hack，我为此感到羞愧。请有人想出一个解决方法，这样我就不必在我的代码中留下这个丑陋的hack了。

还要注意，我的输入框具有“file”类，因此您可能需要更改选择器以满足您的需求。

- William

Answer 2

这毫无意义，感谢William提供的解决方案。由于某种原因，我无法评论您的答案。

但是，即使没有“;”，我仍然可以获得无点击方法。

后来编辑 没关系，是一个事件冒泡让我一团糟。

- Highstrike