为什么这个回调会触发两次？

Question

我有一个 jQuery ajax 脚本来处理提交时的表单。但是，我有几个回调来在 ajax 请求期间添加“处理...”和“完成”等。但是，在全部完成后，脚本应该将编辑按钮添加回可以再次使用该表单的人员，但它添加了两次按钮。

这是 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]");
});

完整的脚本位于此处。

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

有什么想法吗？

Answer 1

是否

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

返回两个元素？

Answer 2

您正在对每个 .message 调用 .append()。我假设您有两个，因为您在此处引用了一个：

$(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();
            });
        });