引导程序列表组突出显示/点击激活

Question

我的页面上有一个列表组，我试图弄清楚用户单击项目后如何突出显示项目。 Found a solution here。因此，我添加了两个组列表-一个包含用于测试的静态项目，第二个我使用从服务器接收到的数据动态添加项目。突出显示适用于带有静态项目的组列表，但不适用于动态创建的列表。如果我错过了什么，可以请你看看吗？这是我的代码：

HTML：

<div class="container">
    <style>
        .list-group {
            display: inline-block;
        }
    </style>
    <ul class="list-group" id="testList">
        <a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(1)">Cras justo
            odio</a>
        <a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(2)">Dapibus ac
            facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(2)">Morbi leo
            risus</a>
        <a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(2)">Porta ac
            consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(2)">Vestibulum at
            eros</a>
    </ul>
</div>

JS：

$.ajax({
    type: 'GET',
    url: "/getAllNetworks",
    cache: false,
    success: function (data) {
        for (i = 0; i < data.length; i++) {
            $('#networkList').append('<a href="#" class="list-group-item list-group-item-action" onclick="javascript:networkSelect(' + data[i].id + ')">' + data[i].name + '</a>');
        }
    },
    error: function () {
        console.log("Something went wrong while getting list of networks");
    }
});

// Handling highlighting of the items in the list
$(".list-group-item").on('click', function () {
    $('.active').removeClass('active');
    $(this).addClass('active');
    console.log($(this).html());
    // Code here whatever you want or you can call other function here
});