javascript - jQuery .append 发生了多次。我该如何防止这种情况？

Question

我查看了一些类似的帖子，但没有找到我正在寻找的解决方案。我试图仅附加一次 div#dropdownmenu。但是，当我将鼠标悬停在 div 上时，它会继续发生。任何帮助将不胜感激。

$(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("");
    }
});

Answer 1

您可以在函数处理程序执行后删除它。我给匿名函数起了个名字，以便于引用。

$(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("");
    }
});

http://api.jquery.com/die/