Question

我有一个表单，当我点击提交时，它会触发一个脚本。

部分代码是：

        if(hasError == false) {
        $(this).hide();
        $("#myForm").fadeOut("fast", function(){
            $("#myForm").before('<img src="../images/loading.gif" alt="Loading" id="loadingImage" />');
        });

        $.post("mail.php",
            { emailFrom: emailFromVal, emailName: nameVal, emailMessage: messageVal },
                function(data){
                    $("#loadingImage").fadeOut("fast", function() {                
                        $("#loadingImage").before('<p>Your message has been sent. Cheers!</p>');                                            
                    });
                }
             );
    }

提交表单后，加载图片会显示......并保持!!

如果我使用Firebug，则会显示加载图像，然后在控制台中输入：

$("#loadingImage").fadeOut("fast", function() {                
                        $("#loadingImage").before('<p>Your message has been sent. Cheers!</p>');

图像消失，文字出现。

为什么？

非常感谢

注意：电子邮件已发送

Answer 1

问题是在使用jQuery方法绑定了所有DOM元素之后添加了新元素。动态元素在加载后需要绑定。最快的解决方案是在页面上添加HTML，以便jQuery可以在页面加载时绑定元素

<img src="../images/loading.gif" alt="Loading" id="loadingImage" style="display:none" />

Answer 2

创建img后，您的第一个淡出结束。你应该这样做：

if(hasError == false) {
        $(this).hide();
        $("#myForm").fadeOut("fast", function(){
            $("#myForm").before('<img src="../images/loading.gif" alt="Loading" id="loadingImage" />');
            $.post("mail.php", { emailFrom: emailFromVal, emailName: nameVal, emailMessage: messageVal },
                function(data){
                    $("#loadingImage").fadeOut("fast", function() {                
                        $("#loadingImage").before('<p>Your message has been sent. Cheers!</p>');                                            
                    });
                }
             );        
        });
}

如您所见，我们已将$.post()调用移至第一个fadeOut()回调函数。

希望这会有所帮助。干杯

jquery发布问题

2 个答案: