jQuery 滚动条插件不适用于 Ajax 加载的内容答案

【问题标题】：jQuery scrollbar plugin not working on Ajax loaded contentjQuery 滚动条插件不适用于 Ajax 加载的内容
【发布时间】：2013-08-15 02:40:24
【问题描述】：

问题是这样的：

我有一个使用 Ajax 提交的简单的两个字段表单。完成后，我重新加载两个 div 以反映更改。

除了 jQuery 插件外，一切都运行良好。这是一个简单的插件，可以用简单的方式调用

function(){
    $('.myDiv').scrollbars();
}

它简单易用，但不适用于 Ajax 加载的内容。这是我用来发布表单和重新加载 div 的代码：

$(function() {
    $('#fotocoment').on('submit', function(e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
        }).error(function() {

        });
        e.preventDefault();
    });
});

我尝试过创建一个函数并在 Ajax 中成功调用它：但没有成功。谁能告诉我如何让它工作？那个简单的插件怎么能被重新加载或重新初始化，或者，也许，刷新。我研究了很多 jQuery 的函数，包括 ajaxStop、ajaxComplete ......似乎没有任何工作或我在这里做错了什么。

【问题讨论】：

你在你的网页上正确添加了 jquery.scrollbars.css 文件吗？
你没有明白这一点。插件工作顺利，但当我用 Ajax 重新加载内容时却不行。

标签： php javascript jquery html css

【解决方案1】：

如果您在 DOM 文档已经加载后动态加载元素（例如在您的情况下通过 AJAX），即使在 $(document).ready() 中，简单绑定 .scrollbars() 到元素也不起作用 - 您需要使用“实时”事件 - 这样 jQuery 将“捕捉”动态添加的内容：

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler); // jQuery 1.7+

来源：jQuery Site

【讨论】：

我自己检查过，但我仍然不明白如何在我当前的代码中实现它。我了解该函数的用法，但我不知道将其放在代码中的何处或如何放置。如果您能就此提供更多信息，我将不胜感激。
@LucianMinea 试试这个：$('document').delegate('.myDiv', 'change', function() { $(this).scrollbars(); });
@LucianMinea ...虽然我不确定 'change' 事件是否适用于 div 数据更改，所以您可能需要查看此主题：link
Prajsnar 我试过了，把它放在主文档中，在 .ready() 事件中，在 .post() 的成功函数中，甚至在实际加载的文件中 .load() .没有任何效果 :( 。如果您可以再次查看主要代码，它现在更小了。

【解决方案2】：

即使我完全反对使用此类试图复制浏览器组件的插件，我也会尝试给出一些提示。

我想你正在使用这个滚动条plugin。在这种情况下，您可能想要重新初始化滚动条元素，并且有很多方法可以做到这一点。您可以像下面的example

一样再次创建元素

<div class="holder">
  <div class="scrollme">
    <img src="http://placekitten.com/g/400/300" />
  </div>
</div>

.....

$('.scrollme').scrollbars();

...

fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
    $('.holder').html(fakedata);
    $('.scrollme').scrollbars();
});

如果您想更新已经初始化的小部件的内容，那么事情会变得更加复杂。一旦您的插件初始化，它会移动一些自定义包装器中的内容以发挥其“魔力”，因此请确保更新正确的元素，然后在窗口上触发调整大小事件，祈祷并希望您的小部件得到重新评估。

如果没有帮助，请尝试提供有关您的 HTML 结构的更多详细信息。

【讨论】：

现在我了解了程序。经过 2 小时的阅读和测试，我已经更改了代码，实际上我设法使它更小，并且我已经更新了原始帖子。如果您现在可以看一下，并提示我在哪里可以实现该虚假响应，那就太好了。我只想重新初始化那些滚动条，仅此而已。 .comment div 是我需要重新初始化那些滚动条的那个。

【解决方案3】：

如果我理解正确，试试这个：

var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');

$(function () {
    $('#fotocoment').on('submit', function (e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
            api.reinitialise();
        }).error(function () {

        });
        e.preventDefault();
    });
});

重新初始化 - 标准 api 函数，更新滚动条。

【讨论】：

【解决方案4】：

我要感谢大家花时间回答我遇到的这个问题。然而，经过 4 天的奋斗和“发明”，我得到了答案:)，它不是 JS 或 Jquery 解决方案，而是文件中的简单逻辑。

最初，我在文档开头的“head”标签中调用我的函数和插件，就像这里的任何其他程序员一样（也有例外）。

然后我的访问者打开我的博客阅读它，他们想发布 cmets。但是有很多 cmets，我不想滚动整个页面，或者使用默认滚动条，只是因为它们很难看，而且我们还没有跨浏览器支持来设置样式。

所以我 .post() 带有评论的表单，然后简单地重新加载包含所有评论的表单。自然 .scrollbars() 插件不起作用。解决方案来了。

如果我把这个：

<script>$('.showcoment').scrollbars();</script>

在我加载的文档的开头（使用 load() ），将不起作用，因为它不是 HTML，它会被自动删除。但！！！如果我这样做：

<div><script>$('.showcoment').scrollbars();</script></div>

在加载文档的同一开头，MAGIC .... 它可以工作。让我到达那里的逻辑我在 javascript 的基础知识中找到了它。如果您的脚本位于 HTML 元素中，则将毫无问题地对其进行解析。

再次感谢大家，希望我的经验对大家有所帮助。

【讨论】：