jQuery函數無法運行

Question

我有以下HTML結構

<div style="float: left; padding-top: 10px;">
            <a id="changeProfilePicture" class="linkOne" style="font-family: 'Ubuntu', sans-serif; color: #FA5882;" href="javascript:void">Change Profile Picture</a>
        </div>
        <div style="clear: both;"></div>
        <div style="display: none;" id="changeProfile">
            <div id="fSpace"></div>
            <form id="upload_form" enctype="multipart/form-data" method="post">
                <button id="openOpen">Select File</button>
                <input type="file" name="file1" id="file1"><br>
                <input type="button" value="Upload File" onclick="uploadFile()">
                <div id="fSpace"></div>
                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                <div id="fSpace"></div>
                <div id="status"></div>
            </form>
        </div>

因此，當我單擊div changeProfilePicture時，div changeProfile會向下滑動。 當單擊按鈕openOpen時，我還有另一個jQuery函數來單擊file1 div，但是當我單擊該按鈕時，就會發生切換changeProfile div的函數。 我的jQuery如下

$(document).ready(function(){
            $("#changeProfilePicture").click(function(){
                $("#changeProfile").slideToggle("slow");
            });
            $("#openOpen").click(function(){
                $("#file1").click();
            });
        });

JSFiddle http://jsfiddle.net/L7dLN/1/

任何想法如何克服這個？ 提前致謝。

Answer 1

實際上，您只需要這樣：

$("#openOpen").click(function(event){
                event.preventDefault();

                $("#file1").click();
            });

表單中按鈕的默認操作/行為是提交，這是有問題的...更多： 單擊<button>標記時的標准行為是什么？ 會提交表格嗎？