Question

我有一个jQuery ajax脚本来处理提交表单。但是，我有一些回调要在ajax请求期间添加“处理...”和“完成”等。但是，在完成所有操作后，脚本应该将edit button添加回给人，可以再次使用该表单，但是它会添加两次按钮。

这是ajax请求开始的地方，评论将帮助您关注

$.ajax({

    url: "../ajax/update_site_info.php?id=" + $('[name="site_id"]').val() + "&field=" + $(parent).children("input").attr("name") + "&value=" + $(parent).children("input").val(),
    cache: false,
    success: function(response){

        //alert('success');

        // On success, fade out the "Saving..."
        $(parent).children('.message').fadeOut(150, function(){

            //alert('message');

            // Remove the save button (submit button)
            $(parent).children(".jUpdateSave").remove();

            // Add "Saved!"
            $(parent).append('<span class="message">' + response + '</span>');

            // Let "Saved!" linger for a while before it fades out
            $(parent).children('.message').delay(1500).fadeOut(250, function(){

                //alert("stop");  // THIS IS WHERE THINGS HAPPEN TWICE

                // Put the edit button back
                $(parent).append('<a class="jUpdate"><img src="images/shared/icon_edit.png" width="16" height="12" alt=""></a>');

                // Remove the "Saved1" message
                $(parent).children('.message').remove();
            });
        }); 
    }
}).error(function(){

    $(".message").text("There was an error proccessing your request. [0]");
});

完整脚本为here。

关于它的一切都有效，除了最后一次回调发生两次（它会提醒stop两次）。

有什么想法吗？

Answer 1

确实

$(parent).children('.message')

返回两个元素？

Answer 2

您在每个.append()上致电.message。我假设你有两个，因为你在这里引用一个：

$(parent).children('.message').fadeOut(150, function(){

并在此附加一个：

$(parent).append('<span class="message">' + response + '</span>');

将使用.message类为每个元素重新创建按钮。

要解决此问题，请避免使用类.message创建多个子元素，或将delay()/fadeOut()语句定位为仅运行一次。

Answer 3

在多个请求的ajax响应出现之前，我认为页面上有超过1 .message个跨度。只是为了解决这个问题，试试这段代码。

// On success, fade out the "Saving..."
        $(parent).children('.message').fadeOut(150, function(){

            //alert('message');

            // Remove the save button (submit button)
            $(parent).children(".jUpdateSave").remove();

            // Add "Saved!"
            $(parent).append('<span class="message">' + response + '</span>');

            // Let "Saved!" linger for a while before it fades out
            $(parent).children('.message:first').delay(1500).fadeOut(250, function(){

                //alert("stop");  // THIS IS WHERE THINGS HAPPEN TWICE

                // Put the edit button back
                $(parent).append('<a class="jUpdate"><img src="images/shared/icon_edit.png" width="16" height="12" alt=""></a>');

                // Remove the "Saved1" message
                $(parent).children('.message:first').remove();
            });
        });

为什么这个回调会被解雇两次？

3 个答案: