如何在提交表单时使用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>