jQuery appendTo vs html()

Question

У меня была проблема, упомянутая здесь IE8 html select needs two clicks to open dropdown. Я установил его, заменив jQuery .html(...) на appendTo. Кто-нибудь знает, почему это произошло?

Краткое описание проблемы -

Вопрос был, когда мы вставить HTML select с помощью innerHTML/jQuery.html(...) в какой-либо другой HTML элемент (div или span), который имеет щелчок или двойной щелчок слушателя, прикрепленную к нему, Нажав на ссылку, выберите два раза, чтобы открыть раскрывающийся список в IE8. Я использовал метод jQuery.html(…), который я заменил на метод jQuery.appendTo(...), и он отлично работал. Я до сих пор не знаю, почему возникает проблема с использованием innerHTML/jQuery.html() в моем случае.

Answer 1

appendTo добавит к существующим DOM элемент, но .html заменит все элементы внутри элемента DOM

Answer 2

.html() работа как заменить HTML в DOM. Таким образом, используя .html() удалит вас DOM и replace его новым новым element и что elements может не иметь назначенного ему события, если вы не использовали delegate или .on.

.appendTo() Работает как добавление ребенка к DOM, так что другой элемент DOM все еще имеет событие, назначенное ранее. Но если я не ошибаюсь, ваш новый загруженный элемент DOM по-прежнему не имеет назначенных им events.

Таким образом, вы можете использовать .on();

Answer 3

Это из-за веб-ускорителя в IE8.

В вашем примере при двойном щелчке по DIV, .html() заменяет innerHTML, но combobox все еще выбран. (Если используется .appendTo(), текст выбран, а не выпадающий список). В режиме Web Accelerator первый щелчок на combobox будет работать как фокус (ошибка IE8?).

Итак, чтобы исправить эту ошибку, вы можете очистить выбор после двойного щелчка.

$(function() { 

    $("#click").dblclick(function(e) { 
     clearSelection();// clear selection 
     var options = "<select id='combobox'>" 
     for (var i = 0; i < 50; i++) { 
      options += '<option value="ActionScript">Value - ' + i + '</option>'; 
     } 
     $(this).html(options + "</select>"); 
    }); 
}); 

function clearSelection() { 
    if(document.selection && document.selection.empty) { 
     document.selection.empty(); 
    } else if(window.getSelection) { 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
    } 
}