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附有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 回答
0

您的代码实际上在 Firefox 中非常适合我，所以我认为这一定是其他问题。你认为还有什么可能会影响它吗？

于 2009-04-09T13:34:41.160 回答