javascript - jQuery加载动画hide()、show()错误

Question

我的html代码:

<div id="success_message" style="display:none">
    <p>Good job!</p>
</div>
<div id="my-form">
    <form>
        <input>....... (there's lots of inputs)
            <input id="my-btn" type="submit" name="" value="Send" />
            <img id="loading-img" src="images/loading.gif" style="display:none"/>
    </form>
</div>

然后我的 JavaScript 就在最后:

<script>

    jQuery('#my-btn').click(function () {
        jQuery('#my-btn').hide();
        jQuery('#loading-img').show();
    });


    jQuery("#my-btn").click(function (e) {

        var str = ......... (there's a string)
        jQuery.ajax({
            type: "post",
            url: "/insert.php",
            data: str,
            dataType: "json",
            success: function (result) {
                if (result.success == 1) {
                    jQuery('#loading-img').hide();
                    jQuery('#my-form').hide();
                    jQuery('#success-message').show();
                } else {
                    jQuery('#my-btn').show();
                }
            }
        });
    });
</script>

问题不在于传入的 str 或 ajax 调用，因为我已经用我的代码和数据进行了测试，并且所有内容都被执行，并转到“if(result.success == 1)”部分代码..

问题是，当我点击“my-btn”时，它使“my-btn”隐藏，但加载图像没有出现，div所在的形式也没有隐藏，然后成功消息也没有显示...

我做错了什么以及如何改进我的代码？

Answer 1

您正在使用按钮(提交)，该按钮会重新加载您的页面。您可以使用 e.preventDefault();或返回 false；以避免重新加载。 查看示例here :

jQuery('#my-btn').click(function () {
        jQuery('#my-btn').hide();
        jQuery('#loading-img').show();

        // put ajax call here....

        return false;
    });

此外，我会将所有代码放入一个方法中。没有理由有两个点击处理程序。