现代化和ajax负载冲突

Question

我有一个使用modernizr.js的页面和一个定制的ajax函数，它每隔x秒重新加载页面内容。这是触发函数的代码。

function reloadSlides() {
    jQuery.ajax({
        url: document.location.href,
        cache: true,
        success: function(html){
            jQuery('#main').html(html);
        }
    });
}

当我查看DOM检查器时，类开始在HTML标记中一次又一次地重复，如下所示：

html lang="de“class=”js非接触式class=动画“js非接触class=动画csstransitions”style=“

为什么会这样呢？我怎么才能避免这种情况？

谢谢你找我！

Answer 1

在我看来，您似乎是在重新加载元素中的整个页面，该元素的id为main。

jQuery('#main').html(html);

这将获取所有重新加载的html，并将其填充到所选元素中。尝试只重新加载main内部的内容，而不是所有的内容。

Answer 2

根据对这一问题的评论：

使用jQuery.load字体，您可以请求完整的页面并为特定元素添加一个选择器：

$('#main').load(url + ' #main', function() { /* something... */});

它将自动将从请求接收的内容放在#main元素中。有关更多细节，请参见文档：http://api.jquery.com/load/

Answer 3

这些类是如何添加的？

这些类是通过您使用的javascript动态添加的。

也发生在我身上

我也使用了一些javascripts，这会导致一些类被注入到DOM中，或者准确地说是在html标记中。这是因为每次加载javascript时，都会执行js，并根据屏幕、页面和其他一些因素添加类。

布局文件中的JS

您可能在布局文件中附加了js。因此，每次向页面发送ajax请求时，js文件都会被执行并再次添加类。因为它是根据您正在使用的输出或输入设备来更新类的；添加这个类是因为您没有附加任何触摸输入，如果您有(触摸屏液晶显示)，那么该类将有其他内容。

JS文件的使用及补救措施

这完全取决于JS的使用方式。

我自己使用js，它们将类添加到我的html标记中，它们需要在以后使用它们时添加这些类。但同时，每次加载页面时，我都会删除布局，这样js就不会再次被执行。

这将防止这种情况一再发生。