javascript - 提交表单时如何用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')" 阻止点击事件到达您的 jQuery 附加点击事件监听器 - 虽然不确定。无论如何，我不会在提交按钮上监听点击事件，而是在表单上监听提交事件，该事件将在实际提交表单时触发(通常可以通过单击提交以外的其他方式发布表单按钮 - 例如通过 Enter 键)。

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

旁注:

您没有在加载的 div 上正确关闭样式属性(注意 > 是蓝色的):

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