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/

Answer 2

您还可以使用.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("");
    }
});

http://api.jquery.com/one/

Answer 3

在附加事件侦听器之前，您正在检查$('div#dropmenu').length == 0)，之后，侦听器已连接并将始终执行。您可以在事件侦听器中移动检查。

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

jQuery .append正在多次发生。我该如何防止这种情况？

3 个答案: