如何在提交表單時使用javascript顯示隱藏的div？

Question

我不是很熟悉jquery，但是我想嘗試一個簡單的動畫gif來表示提交表單的時間。 單擊“提交”以上傳圖像時，我想顯示gif，以便用戶知道正在上傳圖像。 提交按鈕有一個id =“submit”，還有一個onClick =“return confirm（'message'）”

我有包含gif的div代碼：

<div id="loading" style="display:none">

    <img src="images/hand_timer2.gif" alt="loading" />

</div>

這是隱藏的。 它確實顯示我是否刪除了樣式。 很公平。 但是，當我嘗試使用以下javascript顯示它時，它沒有顯示：

<script type="text/javascript">

    $(function(){
        $('#submit').click(function(){
        $('#loading').show();

        }); 
    });

我有

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"    
type="text/javascript"></script>

在一個單獨的PHP頭文件中。 據我所知，這是對jquery庫的唯一引用，但我確實有其他javascript代碼都可以工作。 我只是不能讓這個工作。 任何人都可以指出我做錯了什么以及為什么我不能讓div在點擊提交時顯示gif？

Answer 1

我相信問題可能是你的內聯onClick="return confirm('message')"阻止click事件到達你用jQuery附加的click事件監聽器 - 但不確定。 無論如何，我不會在提交按鈕上收聽點擊事件，而是會在表單上收聽提交事件，這會在表單實際提交時觸發（表單通常可以通過其他方式發布，而不是單擊提交按鈕也是 - 例如通過Enter鍵）。

$('#idOfYourForm').on("submit", function () {
    $('#loading').show();
});

邊注：

您沒有在加載div上正確關閉樣式屬性（注意>是藍色）：

<div id="loading" style="display:none>