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