Question

    <div id="divuploadpic">
    <form name="uploader" method="post" action="upload.php" enctype="multipart/form-data">
         <input type="file" name="uploadedpic" id="uploadedpic" style="display: none;" />
         <input type="submit" name="submituploadedpic" id="submituploadedpic" />
    </form>
</div>
<script>
$(function(){
    $("#divuploadpic").click(function(){
        $("#uploadedpic:hidden").trigger('click');
     });
});
</script>

我隐藏了输入文件标记，而onclicking隐藏了div，它应该是triggered.$("#divuploadpic").click(function()正常但触发器在这里无效。如何解决？

Answer 1

根据我的建议：

更好地使用label代码，而不是div，而不使用js

＆＃13;

<label id="divuploadpic" for="uploadedpic">click
  <form name="uploader" method="post" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="uploadedpic" id="uploadedpic"  style="display:none"/>
    <input type="submit" name="submituploadedpic" id="submituploadedpic" />
  </form>
</label>

＆＃13;

Answer 2

您需要为#uploadedpic上的点击定义处理函数。请参阅jQuery documentation。

＆＃13;

$(function(){
    $("#divuploadpic").click(function(){
        $("#uploadedpic:hidden").trigger('click');
     });
});
$('#uploadedpic').on('click', function(e) {
	e.stopPropagation();
	console.log('clicked');
});

＆＃13;

#divuploadpic {
	border: 1px solid red;
	padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divuploadpic">
    <form name="uploader" method="post" action="upload.php" enctype="multipart/form-data">
         <input type="file" name="uploadedpic" id="uploadedpic" style="display: none;" />
         <input type="submit" name="submituploadedpic" id="submituploadedpic" />
    </form>
</div>

＆＃13;

请参阅此JSFiddle。

修改

如果div中除div元素中的文字之外没有其他内容，请参阅prasad's answer。 HTML Label specification建议仅在预期phrasing content时使用标签。

触发器在jquery中不起作用

2 个答案: