javascript - jQuery appendTo と html()

Question

ここで言及されている問題がありましたIE8 html select needs two clicks to open dropdown。.html(...)jQueryをに置き換えることで修正しましたappendTo。なぜそれが起こったのか知っている人はいますか？

問題の概要-

問題は、クリックまたはダブルクリックリスナーがアタッチされている他の HTML 要素 (または) に HTMLselectを使用して挿入したときでした。私はメソッドを使用していましたが、それをメソッドに置き換えましたが、うまくいきました。私の場合、innerHTML/jQuery.html() の使用に問題がある理由はまだわかりません。innerHTML/jQuery.html(...)divspanjQuery.html(…)jQuery.appendTo(...)

score 3 · Accepted Answer

これは、IE8 の Web Accelerator によるものです。

あなたの例では、DIV をダブルクリックすると.html()、innerHTML が置き換えられますが、コンボボックスはまだ選択されています。( を使用する.appendTo()と、コンボボックスではなくテキストが選択されます)。Web アクセラレータモードでは、コンボボックスの最初のクリックがフォーカスとして機能します (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();
    }
}

score 0 · Accepted Answer

appendTo は既存の DOM 要素に追加されますが、.html は DOM 要素内のすべての要素を置き換えます

score 0 · Accepted Answer

.html()DOM内のhtmlを置き換えるような作業です。そのため、使用すると要素.html()が消去され、非常に新しく、またはを使用していない限り、イベントが割り当てられていない可能性があります。DOMreplaceelementelementsdelegate.on

.appendTo()子を追加するように機能するDOMため、他のDOM要素には以前に割り当てられたイベントがまだあります。しかし、私が間違っていなければ、新しくロードされた要素はまだそれらに割り当てられてDOMいません。events

したがって、使用できます.on()。

javascript - jQuery appendTo と html()

3 に答える 3

Related

Reference