将动态创建的链接的ID分配给JavaScript中的全局变量

Question

我有以下代码结构： index.html - 链接到script.js description.html链接到script.js和description.js

index.html中的代码：

<div id="restaurants">
  <div id="restaurants-wrapper"></div>
</div>

在div＃restaurantss-wrapper中，我想在使用foursquare Places API从script.js文件中获取以下代码后动态插入：

document.getElementById('restaurants-wrapper').innerHTML +=
'<div class="restaurant"><div class="restaurant-img">' + '<img src="' + 
picture + '" alt="restaurant image">' + '</div><div class="restaurant-desc">
<div class="restaurant-name"><a id="' + name.toLowerCase() + '" 
class="restaurant-name-link" href=../html/description.html>' + name + '</a>
</div><div class="restaurant-dist">' + distance + ' km</div></div></div>'

<div id="restaurants">
<div id="restaurants-wrapper"></div>
</div>

现在，这些链接需要转到同一个页面，例如，描述description.html，它将再次动态呈现第一个.js文档中的全局变量中的数据（script.js链接到index。 HTML）。

当我尝试这个时：

$('#restaurants-list').on('click', 'a', function () {
restaurantName = $(this).attr('id')
console.log(window.restaurantName)
})

当尝试通过第二个.js文件访问全局变量时，全局变量仍未定义，这将呈现description.html页面。此外，console.log（window.restaurantName）不记录任何内容，链接立即加载描述页面。另外，在第二个.js文件中调用console.log（window.restaurantName），restaurantName未定义。

这里似乎有什么问题？ 感谢。