[英]jQuery .append is occurring multiple times. How do I prevent this?
I looked at some similar posts, but haven't found the solution I'm looking for. 我看了一些类似的帖子,但没有找到我想要的解决方案。 I am attempting to append div#dropdownmenu
only once. 我仅尝试将div#dropdownmenu
追加一次。 However, it continues to occur as I hover over the div. 但是,当我将鼠标悬停在div上时,它继续发生。 Any help would be greatly appreciated. 任何帮助将不胜感激。
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').live('mouseenter', function () {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
You can remove the function handler after it's been executed. 您可以在执行完函数处理程序后将其删除。 I gave the anonymous function a name for easier reference. 我给匿名函数起了一个名字,以便于参考。
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').live('mouseenter', function f() {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
$(this).die('mouseenter', f);
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
You can also use the .one()
jQuery method to ensure that the event handler is executed only once. 您还可以使用.one()
jQuery方法来确保事件处理程序仅执行一次。
$(function () {
if ($('div#dropmenu').length == 0) {
$('#site_nav > ul > a').one('mouseenter', function () {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
});
} else {
$('#site_nav > ul > li > a').append("");
}
});
You are checking $('div#dropmenu').length == 0)
before you attach the event listener, after that, the listener is attached and will always execute. 在附加事件侦听器之前,您正在检查$('div#dropmenu').length == 0)
,此后,侦听器将附加并始终执行。 You can move the check inside the event listener. 您可以在事件监听器中移动检查。
$(function () {
$('#site_nav > ul > a').live('mouseenter', function () {
if ($('div#dropmenu').length == 0) {
$(this).append("<div></div>");
$('#site_nav > ul > li a div').attr('id', 'dropmenu');
$('div#dropmenu').html("<ul></ul>");
$('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
} else {
$('#site_nav > ul > li > a').append("");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.