如何将事件侦听器绑定到动态生成的内容?

时间:2014-01-30 20:13:46

标签: javascript jquery javascript-events

我试图通过将html注入空div来动态暴露更深层次的导航。虽然html被成功注入第二个导航级别,但我无法将html注入第三级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>');
});

顺便说一句 - 我知道注入所有html可能有更好,更少hacky的方法。但是,它只适用于原型,此时我没有时间找出更好的方法。感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

您需要使用http://api.jquery.com/on/代替click

你改进的小提琴http://jsfiddle.net/22qQt/19/