Question

我有这段代码

<div id="main">
    <div id="u-button">Upload Photo</div>
    <form id="u_form" action="upload.php" method="post" 
    enctype="multipart/form-data" target="upload_t">
       <input id="upload" type="file" name="img" class="multi"/>
       <iframe id="upload_t" class="hide" name="upload_t" src=""></iframe>
    </form>
</div>

将div#main设置为与div#u-button类似的高度和宽度，并将overflow设置为hidden。我们的想法是隐藏表格。我不想要默认文件上传输入元素的样式，所以我想要点击div#u-button，我希望它在input#upload上触发点击事件。

我的jQuery代码就像

$('#u-button').live('click', function(){ $("#upload").click(); });

这似乎适用于某些浏览器（所有浏览器的较新版本），但在某些较旧的浏览器中，它不起作用。

任何人都可以帮我调整代码，使其适用于更多浏览器版本吗？

Answer 1

如果要触发元素事件，请使用jQuery命令trigger()。

http://api.jquery.com/trigger/

Answer 2

您可能试图将input#upload隐藏为display=none或visbilty:hidden。出于安全原因，这会破坏旧浏览器中的click事件。

尝试不隐藏#upload。您可以将u-button提高z-index和position:absolute，以便div可以涵盖#unload。

或者点按“{1}}”按钮，然后使用position:absolute将其推离屏幕。

如何在另一个元素上使用jQuery click事件处理input type = file

2 个答案: