在第一次 jQuery ajax 调用 jQuery 样式更改后重置

After first jQuery ajax call jQuery style changes reset

本文关键字：jQuery 样式 第一次 ajax 调用      更新时间：2023-09-26
似乎

还有其他人有类似的问题，但仍然没有找到答案。这是场景。

用户单击一个按钮，

该按钮显示一个隐藏的div，其中包含一个文本区域，他们可以在其中发表评论：

//show the div containing the textarea
$('#postTypeContainer').css({ 'display': 'block' });

接下来，用户输入注释并单击按钮提交，div 被隐藏，一些数据被发送到服务器：

$("#loading").ajaxStart(function () {
        $(this).show(); //shows a spinner
    }).ajaxComplete(function () {
        $(this).hide(); //hides the spinner
        //hide the div that was opened earlier
        $('#postTypeContainer').fadeOut('fast');
    });
    //send data
    $.ajax({
        type: "POST",
        url: rootUri + "main.aspx/StartNewThread",
        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (markUp) {
           //stuff
        }
    });

这一切都按预期工作。

现在用户通过单击再次打开div，效果很好

//show the div containing the textarea
$('#postTypeContainer').css({ 'display': 'block' });

接下来，用户键入一些数据，在本例中为@abc，因为他们想要标记另一个用户，并且在"keyup"上使用jQuery发生以下情况：

//ajax call to find users matching the @abc
$.ajax({
        type: "POST",
        url: rootUri + "main.aspx/GetMatch",
        data: jsonText,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //stuff
        }
    });

一旦此 ajax 调用返回，打开的div 就会关闭，就好像 DOM 被重置为 ajax 调用之前的状态一样。 因此，在尝试与文本区域交互的过程中，div 关闭了用户，这非常令人沮丧。解决此问题的唯一方法是刷新页面，这显然是我想通过使用ajax避免的。希望有人知道出了什么问题。我尝试过的一件事没有成功，那就是当在 keyup 上输入使 ajax 调用进行标记的函数时，我检查div 的状态，然后尝试在 ajax 调用结束时设置它以保持打开状态，但这不起作用。任何帮助，不胜感激。

.ajaxComplete（） 是一个全局 ajax 事件，每次 jQuery ajax 事件完成时都会触发。因此，当您的第二个 ajax 调用完成时，它也会隐藏postTypeContainerdiv。我认为您希望将该隐藏绑定到第一个 ajax 调用的本地完整事件。

$("#loading").ajaxStart(function () {
    $(this).show(); //shows a spinner
}).ajaxComplete(function () {
    $(this).hide(); //hides the spinner
});
//send data
$.ajax({
    type: "POST",
    url: rootUri + "main.aspx/StartNewThread",
    data: jsonText,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (markUp) {
       //stuff
    },
    complete: function() { // DO IT HERE
        //hide the div that was opened earlier
        $('#postTypeContainer').fadeOut('fast');
    }
});
相关文章：