Функция jQuery .html () уничтожает код в пределах <dl>только в IE7

Question

Написал несколько ответов на SO, но это мой первый вопрос:)

Немного фона ... Я играю с плагином easyAccordian для jQuery: http://www.madeincima.eu/samples/jquery/easyAccordion/. Каждый слайд (сделаниз <dd> s) имеет динамическое содержимое.На одном конкретном слайде я хочу поменять все содержимое <dd>, когда пользователь нажимает кнопку ...

Код следует (или вы можете посетить jsFiddle ):

HTML:

<dl>
<dt class="click">Slide heading</dt>
<dd class="specs"></dd>

<div style="display:none;">
    <div id="defaultSpecs">
        <div style="width:80%;margin-left:10%;text-align:center;margin-top:60px;">
            wrsyik5s7khgjsdghf      
        </div>
    </div>
</div>
</dl>

JS:

$("dt.click").click(defaultSpecs);

function defaultSpecs() {
    //alert($("#defaultSpecs").html());
    var defSpec  =  $("#defaultSpecs").html();
    //alert($("#defaultSpecs").html());
    $("dd.specs").html(defSpec);
    //alert($("#defaultSpecs").html());
    alert($("body").html());
}

Это работает очаровательно в Firefox и других версиях IE, однако при использовании в IE7 это не так...

HTML в пределах <dl> и ниже <dd>, по-видимому, разрушается, и затем (очевидно) функция завершается ошибкой при вызове во второй (или третий) раз ...

Я пропустил важный аспект тегов <dl> или <dd>?Или что-то не так с функцией jQuery .html()?

Несколько вещей, на которые стоит обратить внимание:

• Есть несколько <dd> и <dt> s висходный код, однако ошибка по-прежнему воспроизводится без них.

• Я включил оповещения, чтобы вы могли видеть, что .html() различных элементов возвращает в определенных точках ... не стесняйтесьраскомментируйте их и повозитесь:)

Любая помощь по этому вопросу будет принята с благодарностью:)

Answer 1

Мне кажется, проблема в том, что ваш тег div находится вне тегов dd. Он находится в теге dl, который может содержать только или dt или dd из того, что я собрал. Попробуйте переместить div в тег dd.

В частности, в моей ссылке обратите внимание:

<! ELEMENT DL - - (<strong> DT | DD ) + - список определений ->

Если бы вам было разрешено использовать другие блочные или встроенные теги, это было бы так:

<! ELEMENT DL - O (<strong>% расход; ) * - список определения ->

Обратите внимание, что опция потока означает, что в ней могут быть элементы блочного или встроенного уровня. К сожалению, это не так. (

Что касается причин возникновения проблем, браузер, вероятно, пытается создать DOM, учитывая это, и должен добавить новые элементы. Это может вызвать проблемы с JavaScript, пытающимся следовать определенной структуре, так как браузер создает свои собственные элементы для структуры.