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/

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