javascript - 事件委托(delegate)和 jQuery load()

Question

我正在尝试将事件附加到导航栏中动态加载的导航项。当单击加载的导航项时，它将执行某些操作(警报“hello world”)。我很确定这里的答案与事件委托(delegate)有关，但我已经尝试了很多方法，但还没有完全弄清楚。

要加载的myNav:

   <div id='myNav'>
        <ul>
            <li id='navItem1'>1</li>
            <li id='navItem2'>2</li>
            <li id='navItem3'>3</li>
            <li id='navItem4'>4</li>
        </ul>
    </div>

加载到导航栏中:

<div id='navBar'>
</div>

这是运行它的js:

var loadURL = "index.html #myNav";
$("#navBar").load(loadURL).slideDown("medium");

现在将一个事件附加到新加载的导航项(这是我做错的部分):

$('#navItem1').on("click", function(){ 
   alert("hello world!");
});

Answer 1

您必须使用 on() 的委托(delegate)版本，并委托(delegate)给未动态插入的元素，在本例中是 #navBar

$("#navBar").on("click", "#navItem1", function(){ 
   alert("hello world!");
});

或 load() 中提供的回调，用于在元素实际加载时附加事件处理程序

$("#navBar").load(loadURL, function() {
    $('#navItem1').on("click", function(){ 
        alert("hello world!");
    });
}).slideDown("medium");