Javascript 隐藏输入类型='；文件'；单击其父div时未触发_Javascript_Css_Jquery_Jquery Click Event

Javascript 隐藏输入类型='；文件'；单击其父div时未触发

javascript css jquery

Javascript 隐藏输入类型='；文件'；单击其父div时未触发,javascript,css,jquery,jquery-click-event,Javascript,Css,Jquery,Jquery Click Event,很抱歉，如果你发现这个问题重复，但我环顾四周，尝试了，失败了，所以需要你的帮助 one.html <html> <head> <link rel="stylesheet" href="one.css" > <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script

很抱歉，如果你发现这个问题重复，但我环顾四周，尝试了，失败了，所以需要你的帮助

one.html

 <html>
    <head>
    <link rel="stylesheet" href="one.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="one.js"></script>
    </head>
    <body>
       <div class='some-class' id="add-image">
            <input type="file" id="myfile" style="display:none" />
            <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
       </div>
   </body>
 </html>

one.js

.some-class{
border: 1px solid grey;
}

h4{
    text-align:center;
}

$("#add-image").click(function(){
  $("input[id='myfile']").click();
});

它有时会表现出来

event.returnValue已弃用。请改用标准的event.preventDefault（）。

有时

超出了未捕获范围错误最大调用堆栈大小

如果jquery版本有问题，我不知道发生了什么？你能帮帮我吗？一个工作代码示例，或者一个JSFIDLE？
提前感谢：）

您需要在dom就绪处理程序中添加click处理程序，因为执行

one.js

时，dom结构中不存在

add image

元素

jQuery(function ($) {
    $("#add-image").click(function () {
        $("#myfile").click();
    });
})

由于file input元素位于

myfile

元素中，因此触发file元素上的click元素将导致递归错误：

解决方案是将file元素移出

myfile

元素

<input type="file" id="myfile" style="display:none" />
<div class='some-class' id="add-image">
     <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
</div>


我想在点击这个div的任何地方时打开文件上传日志

演示：

I thin kyou错过了dom就绪处理程序
试试这个：

$(document).ready(function(){
  $("#add-image").click(function(){
     $("#myfile").trigger('click');
  });
});

将html更改为

     <div class='some-class' id="add-image">
        <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
    </div>
    <input type="file" id="myfile" style="display:none" />


我想在点击这个div的任何地方时打开文件上传日志

您是否尝试过

$（“#我的文件”）。单击（）

或

$（'#myfile'）.focus（）？尝试了两种方法。不行！不工作，阿伦。引发如下错误：event.returnValue已弃用。请改用标准的event.preventDefault（）。未捕获范围错误：超过最大调用堆栈大小event.returnValue不推荐使用
在新版本的浏览器中是一个警告。。。希望jQuery能在新版本中处理它。您能提供一些关于调用堆栈问题的更多信息吗？我刚刚从控制台发出了错误警告。没什么了，我知道。但文件上载日志未打开。不推荐使用event.returnValue。请改用标准的event.preventDefault（）。未捕获范围错误：超过最大调用堆栈大小