Я создаю HTML-страницу, которая использует бесконечные функции прокрутки для отображения новых элементов списка при прокрутке вниз, как на Facebook. Я использую плагин jquery.pageless .
Дело в том, что сейчас, когда я тестирую его на IE7, когда я загружаю динамический контент, он не разрабатывается так, как должен быть. Первый набор (20 строк), сгенерированный сервером на html-странице, выглядит хорошо. Затем к следующим 20 страницам, отображаемым с помощью javascript, не будет применен ни один из стилей.
Как мне это исправить? Испытываете трудности при тестировании в IE7 на Mac. Это проблема с IE7? Или, может быть, элементы не добавляются в правильный родительский div в IE (используя jQuery, поэтому я сомневаюсь в этом)? Или есть общий способ перезагрузки таблиц стилей после добавления каждого динамически создаваемого HTML-элемента?
Тип документа: HTML5: <!DOCTYPE html>
Спасибо за совет!
Обновление
Заглядывая в панель разработчиков IE7, HTML выкладывает все уродливые. Первый раз выглядит так:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'>
<figure class='snapshot'><time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'><span class='value-title' title='2010-12-16T00:00:00-08:00'></span></time><a href="/users/25?page_id=25" class="fancy-ajax logo"><span></span><img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/heavenly-cleaning-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" /></a>
<a href="/pages/25/bookmarks" class="status bookmark">Like</a>
</figure>
<section class='details' itemprop='seller' itemtype='http://data-vocabulary.org/Organization'>
<header class='header'>
<hgroup>
<h3 class='user fn org' itemprop='name'>
<a href="/users/25?page_id=25" class="fancy-ajax">Name</a><span class='hyphen'>-</span><span class='distance'>Wheaton, IL</span>
</h3>
<h2 class='title'><span class='quotation-mark'>"</span><a href="/users/25/pages/25" class="url summary">Quote</a><span class='quotation-mark'>"</span><time class='expiration-date dtend'><span class='value-title' title='2011-12-16T00:00:00-08:00'></span></time></h2>
</hgroup>
</header>
<p class='highlights'></p>
<p class='description' itemprop='description'></p>
<footer class='footer'>
<address class='location adr' itemprop='address' itemscope='itemscope' itemtype='http://data-vocabulary.org/Address'>
<span class='locality' itemprop='locality'></span>
<span class='geo' itemprop='geo' itemtype='http://data-vocabulary.org/Geo'>
<span class='latitude' itemprop='latitude'>
<span class='value-title' title='41.850249'></span>
</span>
<span class='longitude' itemprop='longitude'>
<span class='value-title' title='-88.0855459'></span>
</span>
</span>
<span class='tel' itemprop='tel'></span>
</address>
Category: <a href="/pages/home" class="category" itemprop="category" rel="tag" target="_top">Home</a>
</footer>
</section>
</article>
Второй раз выглядит примерно так:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'/>
<figure class='snapshot'/>
<time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'/>
<span class='value-title' title='2010-12-16T00:00:00-08:00'/>
</time/>
<a href="/users/25?page_id=25" class="fancy-ajax logo">
<span/>
<img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/name-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
</a>
<a href="/pages/25/bookmarks" class="status bookmark">Like</a>
</figure/>
...
Я возвращаю его в виде строки json и добавляю так:
$(window).load(function() {
var params = paginator;
params.dataType = "string";
$('#content').pageless({
url: window.location.pathname,
params: params,
distance: 500,
totalPages: 10,
loaderImage: "/images/loaders/load.gif",
scrape: function(data) {
var data = $.parseJSON(data);
var paginator = data.paginator;
var search = data.search;
var html = data.pages // html string;
if (data.more == false) {
$.pageless.settings.totalPages = $.pageless.settings.currentPage;
if($.pageless.settings.totalPages <= $.pageless.settings.currentPage){
$.pageless.stopListener();
}
}
$.pageless.settings.params = {dataType: "string", paginator: paginator, q: search.q, c: search.c, l: search.l, a: search.a};
return html;
}
});
})