jQuery Mobile在DOM中存储了同一元素的多个实例

Question

我有三个页面（每个页面都是一个HTML文件），所有三个页面都有一个页脚：

    <footer data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="single.html?id=" class="">Store</a></li>
                <li><a href="map.html?id=" class="">Map</a></li>
                <li><a href="info.html?id=" class="ui-btn-active ui-state-persist">Info</a></li>
            </ul>
        </div>
    </footer>

为了从服务器或本地存储中获取数据，我使用jQuery将实体ID添加到URL：

setFooter: function(id){
    $('footer li a').each(function(){
        var val = $(this).prop('href');
        $(this).prop('href', val + id);
    })
},

对于第一页，一切正常。对于第二页，我有两个页脚实例，在第三页上我有三个实例。

为什么JQM会向DOM添加多个实例，我该如何避免这种情况？我不想转向缓存，因为它加快了页面加载速度。

PS。这基本上适用于JQM页面中的所有静态内容。我从Handlebars.js得到的内容中得不到这个。