jQuery mCustomScrollbar没有处理ajax内容

$(window).load(function(){ $("#content_1").mCustomScrollbar({ scrollButtons:{ enable:true } }); // ajax code function beauty_of_ceylon() { $('.content-text').html('
'); $('.content-text').load("packages/beauty-of-ceylon.php"); } 

Answer 1

 $('.content-text').load("packages/beauty-of-ceylon.php", function () { $("#content_1").mCustomScrollbar({ scrollButtons:{ enable:true } }); $content = ''; $('.content-text').append($content); setTimeout("$('#update').click();",10); }); 

它对我有用：D

Answer 2

我相信.load()是异步的，这意味着它会在.load()调用期间继续运行脚本。 所以你必须在回调函数中调用mCustomScrollbar，否则内容将不存在。 所以试试吧

 $('.content-text').load("packages/beauty-of-ceylon.php", function () { $("#content_1").mCustomScrollbar({ scrollButtons:{ enable:true } }); }); 

Answer 3

嘿家伙我这样做:)

在发送ajax之前销毁它并清除你的div。请检查注释

 $(document).ready(function(){ $(".YOUR-CONTENT-DIV").mCustomScrollbar({ theme:"dark", }); $.ajax({ url: "YOUR AJAX URL", type: "post", data: data, beforeSend: function() { $(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy"); //Destroy $('.YOUR-CONTENT-DIV').html('
Loading ...
'); //clear html because it will show normal scroll bar }, success: function(data) { $('.YOUR-CONTENT-DIV').html(data); }, complete: function () { $(".YOUR-CONTENT-DIV").mCustomScrollbar({ theme:"dark", }); } }); }); 

Answer 4

已经有一段时间了，所以我猜你已经找到了解决方案。 如果没有，您的代码是正确的，一点。 执行.load ，使用它的回调函数启动此命令：

 $(selector).mCustomScrollbar("update"); 

在他们的网站上，它表示无论何时更新内容，都必须调用此函数，以便mCustomScrollbar重新计算内容的高度，滚动条等。

http://manos.malihu.gr/jquery-custom-content-scroller/

Answer 5

只需将脚本嵌入到JSON / AJAX调用内容中，例如：

1.JSON / AJAX后端脚本（myscript.vendor，如Ruby，PHP …）

 var myHTMLContent = ' 
 <-- Manipulate -->  ...  
'; 

2.调用脚本“myscript.vendor”

 $.ajax({ url: "/get/myscript.vendor", type: "post", dataType: "html", success: function (data) { $('#data').html(data); } }); 

Answer 6

当你通过ajax window.load加载页面时，不会被调用，所以mCustomScrollBar没有被初始化。当ajax文件准备好的页面加载时将被触发。

试试下面的代码。

 $(document).ready(function(){ $("#content_1").mCustomScrollbar({ scrollButtons:{ enable:true } }); });