Question

在网站上工作时，我有一个内容区域部门，我想根据我点击的图像更新其内容。现在，我有一个我在内容区域使用的自定义滚动条。现在，我首先为onclick脚本函数编写了以下代码片段：

function xyz(){
    $("#content-area").load("abc.php");
    $("#content-area").mCustomScrollbar({scrollButtons:{enable:true}});
}

但脚本的第二行没有响应，即我没有得到滚动条。相反，当我使用这段代码片段时，它起作用了：

$.post("abc.php", function(data){
   $("#content-area").html(data);
   $("#content-area").mCustomScrollbar({scrollButtons:{enable:true}});
});

我想知道$ .post（）的功能以及为什么第一个片段在第二个片段工作时没有工作？

Answer 1

第一种情况是在{em>发送发送后立即执行mCustomScrollbar：请记住，AJAX中的第一个A用于asynchronous。但它显然还没有任何工作，因为来自服务器的响应还没有。

在第二个代码段mCustomScrollbar窗口小部件创建发生在AJAX请求的响应收到之后（因为此行现在是$.post成功处理程序的一部分）和 #content-area填充了必要的结构（.html()）调用。所以现在它正常工作。

您可以使用$.load方法可以提供自定义回调函数的事实，该函数将在请求完成时执行，如here所述。例如：

$("#content-area").load("abc.php", function() {
     $(this).mCustomScrollbar({scrollButtons:{enable:true}});
});

注意$(this)用法：由于this在该回调函数中依次设置为每个DOM元素，因此您无需再次遍历DOM查找content-area ;只需将该元素包装到jQuery对象中即可。

Answer 2

您需要使用在请求完成时执行的回调函数：

$("#content-area").load("abc.php", function(){
     $(this).mCustomScrollbar({scrollButtons:{enable:true}});
});

Answer 3

我想在第一个例子中，第二个语句是在.load()函数完成之前执行的。在第二个中，您正确使用了成功函数，该函数仅在完成POST请求后执行。