jQuery. после не добавления элементов в IE7 / IE8

Question

Я не совсем уверен, что я делаю неправильно, и нет никаких признаков того, что это не должно работать в IE. Но следующий код не добавляет элементы <dd> в .after () в DOM:

shouts_list_selector = $("#shouts dl#shouts_list");

shout_object = $('<dt>')
            .attr('id', shout.id)
            .text(shout.name)
            .append($('<span>').addClass('separator').text(' : '))
            .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when))
            .after($('<dd>').html(shout.message))

shout_object.prependTo(shouts_list_selector).slideDown('slow', 'swing');

крики - это объект, содержащий несколько сообщений. Это отлично работает в Firefox и Chrome. Но в IE отсутствуют элементы <dd>. Что-то не так с этим примером или лучший способ сделать это?

Редактировать: Вот пример, показывающий проблему: http://jsfiddle.net/sx6YH/

Теги DD правильно отображаются при запуске в Firefox или Chrome. Но не в IE.

Answer 1

Я нашел причину этого вложенного приложения. IE8, похоже, не в состоянии справиться с этим правильно. У меня была такая же проблема, @ Энди Шинн направил меня в правильном направлении. В моем случае я пытался добавить ссылку в несортированный список:

<ul id=menu></ul>

со следующим jQuery:

$("ul[id=menu]").append("<li><a href='test.html'>test</a></li>");

Это работает в большинстве браузеров, но не в IE8. Если вы добавите их без проверки, это сработает:

$("ul[id=menu]").append("<li/>").html("<a href='test.html'>test</a>");

Answer 2

Я смог добиться этого, просто создав тег <dd> и appendingTo список сразу после <dt>, например:

shouts_list = $('<dl>').attr('id', 'shouts_list');

$.each(shouts_object.shouts, function(id, shout) {
    $('<dt>')
        .attr('id', shout.id)
        .text(shout.name)
        .append($('<span>')
                .text(' : '))
        .append($('<abbr>')
                .attr('title', shout.timestamp)
                .text(shout.when))
        .appendTo(shouts_list);
    $('<dd>').html(shout.message)
        .appendTo(shouts_list);
});

shouts_list.appendTo('#shouts');

Это прекрасно работает как в IE8, так и в Firefox.,Я чувствую, что в IE8 может быть ошибка с обработкой .after

Answer 3

причина, по которой элементы <dd> не отображаются, заключается в том, что вы создаете недопустимый HTML. с вашим текущим кодом HTML разрешается в:

<dt id="1">
    test
    <span class="separator"> : </span>
</dt>
<dd>hello</dd>

<dd> должно быть внутри <dt>.

ваш код должен выглядеть так:

shout_object = $('<dt>')
        .attr('id', shout.id)
        .text(shout.name)
        .append($('<span>').addClass('separator').text(' : '))
        .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when))
        .append($('<dd>').html($().emoticon(shout.message)))

тогда ваш HTML будет в порядке и будет отображаться в ie7 / 8