Question

问题在于：

我有一个简单的两个字段表单，我用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 ......似乎没什么用，或者我在这里做错了。

Answer 1

如果你在DOM Document已经加载之后动态加载元素（比如你的情况下通过AJAX），简单绑定.scrollbars（）到元素就不会工作，即使在$（document）.ready中也是如此（） - 你需要使用＆＃34; live＆＃34;事件 - 这样jQuery将会＃34;赶上＆＃34;动态添加内容：

$(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

Answer 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();
});

如果您想要更新已初始化的小部件的内容，那么事情会变得更复杂。一旦你的插件初始化，它就会在一些自定义包装器中移动内容以进行“魔术”，所以请确保更新正确的元素，然后在窗口上触发resize事件，祈祷并希望你的小部件得到重新评估。 / p>

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

Answer 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功能，更新滚动条。

Answer 4

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

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

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

所以我.post（）带有注释的表单，只需重新加载包含所有这些的表单。当然.scrollbars（）插件不起作用。这是解决方案。

如果我这样说：

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

在我加载的文档的开头（带有load（）），将无法正常工作，因为它不是HTML，而是自动删除。但是!!!如果我这样做：

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

在加载文档的同一个开头，MAGIC ....它的工作原理。让我在那里的逻辑我在javascript的基础知识中找到了它。如果你的脚本在HTML元素中，那么它将被解析而没有任何问题。

再次感谢大家，我希望我的经历能够帮助他人。

jQuery滚动条插件不能处理Ajax加载的内容

4 个答案: