jQuery appendTo vs html（）

Question

我有一個問題，這裏提到IE8 html select needs two clicks to open dropdown。我通過用appendTo替換jQuery .html(...)來修復它。任何人都知道爲什麼發生？

總結問題的 -

的問題是，當我們插入使用innerHTML/jQuery.html(...)一個HTML select成具有連接到它的點擊或雙擊監聽其他一些HTML元素（div或span）點擊選擇reuqired兩次點擊打開IE8中的下拉菜單。我正在使用jQuery.html(…)方法，我用jQuery.appendTo(...)方法取代了它，它工作正常。我仍然不知道爲什麼使用innerHTML/jQuery.html（）在我的情況下有問題。

Answer 1

appendTo將添加到現有的DOM元素，但html的將取代DOM元素中的所有元素

Answer 2

.html()就像是更換內部DOM HTML工作。因此，使用.html()將清除您的DOM元素和replace它與新的如此新的element和elements可能沒有事件分配給它，只要你沒有使用delegate或.on。

.appendTo()正在爲DOM添加子項，所以其他DOM元素仍然具有之前分配的事件。但如果我沒有錯，你新加載的DOM元素仍然沒有events分配給他們。

所以你可以使用.on();

Answer 3

這是因爲IE8中的網絡加速器。

在您的示例中，雙擊DIV時，.html()將替換innerHTML，但組合框仍處於選中狀態。 （如果使用.appendTo()，則選擇文本，而不是組合框）。 在Web Accelerator模式下，第一次點擊組合框將作爲焦點（一個IE8的bug？）。

因此，要修復此錯誤，可以在雙擊後清除選擇。

$(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(); 
    } 
}