页面上的Bootstrap下拉更改图标类重新加载

Question

我正在使用Bootstrap框架下拉列表作为一种选择。见图像：

当用户点击每个下拉链接时，将触发js函数以设置定义用户的城市/区域的cookie。 -> This is working!

相同的功能会在下拉列表中的已点击链接的图标上添加一个类，以指示所选项目/城市（请参阅上图中的“绿点图标”）。 -> This works as soon as the link is clicked!

BUT

在页面重新加载后，该函数无法保持图标新的css类，并且我根本没有活动项，只有两个灰点。 -> Fail!

这是html：

<a href="#" id="city_1'" class="define-city-1" data-city="city1" role="menuitem">
<i class="icon large-point grey-300" aria-hidden="true"></i>
    Betim
</a>


function reload_city() {
    setTimeout(function() { 
        // redirect to the current url + the query string built with the cookie value
        window.location = window.location.pathname + '?city=' + jQuery.cookie('city');
    }, 1000);
}

jQuery("#city_1").click(function(e){

    e.preventDefault();

    jQuery.cookie('city', jQuery(this).attr('data-city'));

    if(jQuery(this).attr('data-city') == jQuery.cookie('city')){
        jQuery(this).children('i').removeClass('grey-300');
        jQuery(this).children('i').addClass('green-600'); 
    }

    reload_city();
    e.stopPropagation();

});

我想知道在重新加载时导致这种行为的原因，我真的很感激有关此问题的任何意见。提前谢谢！