jQuery .append is occurring multiple times. How do I prevent this?

Question

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. However, it continues to occur as I hover over the 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("");
    }
});

Answer 1

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

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

Answer 2

You can also use the .one() jQuery method to ensure that the event handler is executed only once.

$(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

You are checking $('div#dropmenu').length == 0) before you attach the event listener, after that, the listener is attached and will always execute. 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("");
        }
    });
});