Question

总结：我开发了一张带传单的地图。我有一个带有托架的UL li。单击UL Li项目后，它将使用JavaScript函数缩放到该托架。通过硬编码海湾来填充UL，现在我已经改为json文件，其中海湾被jquery函数调用以填充海湾的Ul li。

问题是，当Ul li填充了托架时，它不再调用JavaScript函数，并且在单击特定托架后不会缩放到特定托架。

下面我解释了我的代码。

我有一个标准的html无序列表，如下所示

<li id="Irish Continental Shelf"><a>Irish Continental Shelf</a></li>

选择项目时，将调用以下JavaScript函数：

document.getElementById('Irish Continental Shelf').addEventListener('click', function () {
IrishContShelf();
var text = document.getElementById("mytext");
text.value = "Irish Continental Shelf";
});

此功能根据所选的ID缩放到传单地图上的特定区域。

但是现在我想从json文件中添加一个更动态的列表，例如：

var data = {
"users": [
{ "Id": "Irish Continental Shelf" },
{ "Id": "Irish Exclusive Economic Zone" }]}

然后jquery函数填充无序列表，如：

function list(){
$(data.users).each(function () {

  // add in id of data variable

    var output = "<li id= " + this.Id + "><a>" + this.Id + "</a></li>";
    $('#placeholder').append(output);
});}

将填充的ul：

 <ul id="placeholder" style=" height:400px;
  overflow:scroll;" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"   >

我不明白，即使我创建了li并且给出了＆＃39; id＆＃39;动态UL li的属性与静态UL li的id相同，它不会调用JavaScript函数，并缩放到特定区域。

我知道哪里出错了？

Answer 1

您没有提供足够的HTML来展示完整的示例，但根据我的评论：

您需要在#placeholder上使用委派的事件处理程序。例如

$('#placeholder').on('click', 'li', function(){ 
    var $li = $(this); 
    // DO STUFF HERE (Like extract data attributes from the LI to determine where to go next)
});

这会侦听从＆＃39; UL＆＃39;内部元素冒出的点击事件。带有id="placeholder"，然后的元素应用li选择器，然后为导致该事件的任何匹配元素调用该函数。

这将适用于动态添加的内容，因为它在UL而不是每个LI上进行侦听。

使用jquery填充UL列表但不调用单独的JavaScript函数

1 个答案: