向活动附加元素添加活动类不能按预期工作

Question

我在页面顶部创建了一个固定的水平导航栏。我想要做的是更改与当前页面对应的菜单项的背景颜色，但我似乎无法让它工作。我尝试寻找其他类似的问题，但没有一个解决方案解决了我的问题。

首先，我在加载后在每个页面上动态添加导航栏。那是我的代码：

$(document).ready(function(){
    // 'header' is the div wrapping the navbar
    $('#header').html(
        "<ul id='menu'>" +
        "<li><a href='rooms.php'>Rooms</a></li>" +
        "<li><a href='gallery.php'>Gallery</a></li>" +
        "<li><a href='reviews.php'>Reviews</a></li>" +
        "<li><a href='contact.php'>Contact Us</a></li>" +
        "</ul>"
    );
});

这是我写的函数，它应该将菜单项设置为'active'：

$('#menu li').on('click', 'a', function(){
    $('#menu li').removeClass('active');
    $(this).parent().addClass('active');
});

我认为这是因为链接确实被设置为“活动”，但由于导航栏是动态创建的，因此它“覆盖”了更改（我是对的吗？）。问题是我不知道如何解决它。任何帮助将不胜感激。