javascript - 如何将事件监听器绑定(bind)到动态生成的内容？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

Direct vs. Delegated - jQuery .on() (6 个回答)

已关闭 9 年前。

我试图通过将 html 注入(inject)空 div 来动态公开更深层次的导航。虽然 html 已成功注入(inject)到第二级导航级别，但我无法将 html 注入(inject)到第三级 div 中。我相信问题的存在是因为事件监听器忽略了动态生成的内容，但我无法找到修复它的方法。下面是JS。我还提供了一个简单的jsfiddle来说明我想要完成的任务。单击蓝色链接可显示每个连续的导航级别。它在第二级失败。 http://jsfiddle.net/22qQt/17/

$('#L1A').click(function () {
    $('#L2 > div.menuWrap > ul.menuItems').html('<li class="navTitle">Campus Life</li><li class="item">Overview</li><li class="link" id="L1A-2A">Housing</li><li class="link" id="L1A-2B">Fitness & Recreation</li><li class="link" id="L1A-2C">Health Services</li><li class="item">Campus Library</li><li class="item">Life in Philly</li><li class="item">Activities Office</li><li class="item">Student Life Office</li>');
});
    
$('#L1A-2A').click(function () {
    $('#L3 > div.menuWrap > ul.menuItems').html('<li class="navTitle">Housing</li><li class="item">Overview</li><li class="item">Policies</li><li class="item">Renters Insurance</li><li class="item">Move-In Day</li>');
});

顺便说一句 - 我知道可能有一种更好、更简单的方法来注入(inject)所有 html。然而，这只是一个原型(prototype)，目前我没有时间找出更好的方法。

Answer 1

您需要使用http://api.jquery.com/on/而不是点击。

你改进的 fiddle http://jsfiddle.net/22qQt/19/