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的{{1}}处理程序。

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>');

});

为什么没有调用<li>上的事件处理程序？</li>

1 个答案: