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

Using jquery to populate UL list but is not calling a seperate JavaScript function

本文关键字：单独 调用 JavaScript 函数 填充 jquery UL 列表 使用      更新时间：2023-09-26

总结:我制作了一张带有传单的地图。我有一辆带敞篷的ulli。一旦单击UL Li项，它将使用JavaScript函数缩放到该区域。通过硬编码的bayes填充UL，现在我已经改变为一个json文件的bayes被一个jquery函数调用，以填充ulli与bayes。

问题是，当ulli填充了bay后，它不再调用JavaScript函数，并且一旦单击了特定的bay，就不会缩放到特定的bay。

下面我解释了我的代码。

我有一个标准的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并为动态UL li赋予'id'属性与静态UL li相同的id时，它也不会调用JavaScript函数，并且缩放到特定区域。

你知道我哪里错了吗?

您没有提供足够的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)
});

监听来自'UL'元素内部的id="placeholder"元素冒气泡的点击事件，然后应用li选择器，然后调用任何导致事件的匹配元素的函数。

这将与动态添加的内容一起工作，因为它侦听UL而不是每个LI。

相关文章：