0

これは引数の受け渡しの問題かもしれないと思いますが、私はまだjQueryに慣れていません。jQuery 関数で 1 つのブロック要素を別のスタイルに変更することから始まる 2 つのブロック要素があります。しかし、jQuery を使用してこれらのブロック要素の内容を同じ種類のコードに置き換えると、スタイル変更機能が機能しなくなります。

これは私が取り組んでいることの核心です：

$(document).ready(function() {
    $('#baz').click(function() {
        $('#bar').replaceWith('<div id="bar">' + 'texttexttexttexttext' + '<span id="hl1" class="nohighlight">' + 'some other stuff to be highlighted' + '</span>' + 'texttexttexttext' + '</div>');
        $('#foo').replaceWith('<div id="foo"><span id="rollover1">' + 'Look at this!' + '</span></div>');
    });

    $('#rollover1').mouseenter(function() {
        $('#hl1').removeClass('nohighlight').addClass('highlight');
    });

    $('#rollover1').mouseleave(function() {
        $('#hl1').removeClass('highlight').addClass('nohighlight');
    });
});​

...

<div><a href="#" id="baz">change</a></div>
<div id="foo"><span id="rollover1">HEY!</span></div>
<div id="bar">blahblahblah<span id="hl1" class="nohighlight">blahblahblahblah</span>blahblahblah</div>​

http://jsfiddle.net/xdP7Z/4/を参照してください

4

1 に答える 1

1

要素を動的に変更しているため、委任する必要があります

$(document).ready(function() {
    $('#baz').click(function() {
        $('#bar').replaceWith('<div id="bar">' + 'texttexttexttexttext' + '<span id="hl1" class="nohighlight">' + 'some other stuff to be highlighted' + '</span>' + 'texttexttexttext' + '</div>');
        $('#foo').replaceWith('<div id="foo"><span id="rollover1">' + 'Look at this!' + '</span></div>');
    });

    $('body').on('mouseenter','#rollover1', function() {
        $('#hl1').removeClass('nohighlight').addClass('highlight');
    });

    $('body').on('mouseleave','#rollover1',function() {
        $('#hl1').removeClass('highlight').addClass('nohighlight');
    });
});

フィドル

DOM に存在する最も近い親要素に委任するのが最善であるためbody、静的な親要素に置き換える必要があります。委任することで、イベント ハンドラーを親要素にアタッチします。親要素は、イベントが発生するのをリッスンし、イベントを処理します。

jQuery 1.8 を選択したのを見たので、.on() を使用して例を作成しましたが、古いライブラリを使用している場合は、使用するメソッドを選択する方法を次に示します。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+
于 2012-09-21T17:48:33.637 に答える