3

问题是这样的：

我有一个简单的两个字段表单，我使用 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 succes 中调用它：但没有运气。谁能告诉我如何让它工作？那个简单的插件怎么能被重新加载或重新初始化，或者，也许，刷新。我研究了很多 jQuery 的功能，包括 ajaxStop、ajaxComplete ......似乎没有任何工作或我在这里做错了什么。

4

4 回答 4

2

如果您在 DOM 文档已经加载后动态加载元素（例如在您的情况下通过 AJAX）简单绑定 .scrollbars() 到元素将不起作用，即使在 $(document).ready() 中 - 您需要使用 " live” 事件——这样 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 网站

于 2013-08-13T13:59:26.477 回答
1

Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.

I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following 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();
});

If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.

If it doesn't help, then try to come up with some more details about your HTML structure.

于 2013-08-14T07:52:23.460 回答
1

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

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

reinitialise - 标准 api 函数，更新滚动条。

于 2013-08-16T11:04:53.703 回答
1

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

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

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

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

如果我把这个：

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

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

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

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

再次感谢大家，希望我的经验能帮助到其他人。

于 2013-08-16T15:26:12.157 回答