Question

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

用户单击一个按钮，该按钮显示包含textarea的隐藏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调用之前的那样。因此，在尝试与textarea交互的过程中，div关闭了用户，这非常令人沮丧。解决这个问题的唯一方法是刷新页面，这显然是我想要使用ajax避免的。希望有人知道什么是错的。我尝试失败的一件事是当在keyup上输入函数进行标记的ajax调用时，我检查div的状态然后尝试在ajax调用结束时设置它以保持它打开但不是工作。任何帮助表示赞赏。

Answer 1

.ajaxComplete()是一个全局ajax事件，每次jQuery ajax事件完成时都会触发。因此，当您的第二个ajax调用完成时，它还会隐藏postTypeContainer div。我想你想把那个隐藏绑定到第一个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');

    }
});

首先jQuery ajax调用jQuery样式更改重置

1 个答案: