javascript - Bootstrap：文件输入字段在模式对话框中使用时忽略点击

Question

我对 Bootstrap 和文件字段有一点奇怪的问题：

对于一个项目，我正在实现一个简单的上传对话框。

http://jsfiddle.net/RxxSv/4/

一旦我添加data-toggle="modal"到模态容器中，文件输入字段就会停止对点击做出反应（并且浏览器不会显示文件选择对话框）。

我怀疑这是由 Bootstrap 的模式代码/事件处理引起的。点击事件在某处丢失，但我无法弄清楚。

有任何想法吗？

Answer 1

我无法真正解释原因，但如果您将文档中的所有属性（在 Live Demo 中）放入，则输入可以正常工作。

<div id="modal-upload" class="modal hide fade" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

JSFiddle：http: //jsfiddle.net/4TQvY/

Answer 2

我的同志建议以另一种方式做到这一点：

<a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">

进行单独的 & 输入，然后调用 click 事件

    jQuery("#prefix").click(function()
    {
        console.log("INSERT JSON");
        $("#file_source").click();
        return false;
    });