jquery - 如果通过 JQuery 创建 html，则鼠标触发无法正确发生

Question

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 有何 react ？

edit: in summary this was the solution:

$('<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 放置在悬停功能下方，则它将不起作用。

Answer 1

以下是根据当前代码生成的 XHTML:

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

如您所见，您希望将鼠标悬停在其上的部分没有文本。

尝试:

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

您现在将在新的 div 中看到附加了 message 类的文本。