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 放置在悬停功能下方,则它将不起作用。
最佳答案
以下是根据当前代码生成的 XHTML:
<div id="header2">put mouse here<div class="message"></div></div>
如您所见,您希望将鼠标悬停在其上的部分没有文本。
尝试:
$('<div />').addClass('message').text('appended DIV').appendTo('#header');
您现在将在新的 div
中看到附加了 message
类的文本。
关于jquery - 如果通过 JQuery 创建 html,则鼠标触发无法正确发生,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/734168/