Почему обработчики событий для этой <li>не запускаются?

Question

У меня есть следующее меню:

<button id="button" onclick="DropDown(event)">Drop down the menu</button>
<div id="menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Код JavaScript для меню:

// To close the menu when clicked outside
$(document).click(function() { $('#menu').hide(); });

// When clicking on the items
$('#menu li').click(function () {

    $(document).append('<code>Clicked item!</code>');

});

function DropDown(event) {

    // Position of the menu
    var position = $('#button').offset();

    // Position the menu and slide it down
    $('#menu').css('top',
                   (position.top + $('#button').height() + 4) + 'px')
              .css('left',
                   position.left + 'px')
              .slideToggle();

    event.stopPropagation();
}

Большая часть кода работает, как и ожидалось: нажатие кнопки приводит к выпадению менюи щелкнув в любом месте, меню исчезнет. Однако , обработчик событий, назначенный элементам <li>, вообще не вызывается, несмотря на то, что вызывается обработчик onclick для document.

jsFiddle: http://jsfiddle.net/W5SqD/4/

Answer 1

Попробуйте прикрепить событие либо в блоке $(document).ready(), либо с помощью реального обработчика. Это гарантирует, что событие присоединяется, когда элемент существует. Ниже работал для меня.

// When clicking on the items
$('#menu li').live("click",function () {

    alert("Hello!");
    $(document).append('<code>Clicked item!</code>');

});