Question

我试图将事件附加到导航栏中动态加载的导航项目。单击加载的导航项时，它将执行某些操作（警报＆＃34; hello world＆＃34;）。我非常肯定这里的答案与事件授权有关，但我已经尝试了很多东西，而且尚未确切地想出它。

要加载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>

加载到navBar：

<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()的委托版本，并委托给非动态插入的元素，在本例中为#navBar

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

或load（）中提供的回调，以在元素实际加载时附加事件处理程序

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

事件委托和jQuery load（）

1 个答案: