1

HTML

<div id="header">top of page</div>
<div class="message">hello, how are you</div>
<div class="message">I am fine</div>

jquery

$(document).ready(function () {
    $("#header").append('<div class="message">appended DIV</div>');
    $('div.message').hover(
        function () {
            alert('hi');
        },
        function () {
            alert('bye');
        }
    );
});

HTML 内の既存の DIV がマウスをトリガーしてアラートを出すのに、追加された DIV がそうではなく、「死んでいる」のはなぜですか。追加された DIV は、既存の DIV のようにどのように反応しますか?

編集：要約すると、これが解決策でした：

$('<span />').addClass('message').text('(mouse 1)').appendTo('#header');
$('<span />').addClass('message').text('(mouse 2)').appendTo('#header');

$('.message').hover(
    function () {
        $('#header').prepend('in');
    },
    function () {
        $('#header').prepend('out');
    }
);

SPAN がホバー機能の下に配置されている場合、機能しないことに注意してください。

4

3 に答える 3

2

以下は、現在のコードから生成された XHTML の結果です。

<div id="header2">put mouse here<div class="message"></div></div>

ご覧のとおり、ホバーすると予想される部分にはテキストがありません。

試す：

$('<div />').addClass('message').text('appended DIV').appendTo('#header');

クラスがアタッチdivされた new 内のテキストが表示されます。message

于 2009-04-09T13:57:34.553 に答える
1

このようにテキストを追加し、後で選択できるDOMオブジェクトを作成しないため、機能しません。

おそらく次のようなことをする必要があります：

var divObj = $('<div>').attr('class', 'message');
$('#header').append(divObj);
$(divObj).hover(
    function () {
        alert('hi');
    },
    function () {
        alert('bye');
    }
);
于 2009-04-09T13:26:03.240 に答える