Question

以下是我填充列表的方式：

function bingNetworksList(myList) {
    var list = '';
    for (i = 0; i < myList.length; i++) {
      list += '<li><a href="#">' + myList[i] + '</a></li>';
    }

    $('#myList').empty();
    $('#myList').append(list);
}

这是我的html文件：

<ul id="myList"></ul>

我想为每个列表项添加一个click事件（没有单独的id）：

$(function() {
  $('#myList').click(function() {
    var listItem = this.find('a').text();
    console.log(listItem); // never logged
  });
});

但是，当我点击列表项时，点击事件不会触发。

我做错了什么？

Answer 1

我只能假设你的控制台出现了js错误。

我为您创建了一份工作样本。我们可以使用事件委派，然后检索被单击的DOM节点。你需要确保在DOM ready事件被触发时调用bingNetworksList [在这里假设拼写错误并且意味着binD;]]函数。

function bingNetworksList(myList) {
    var list = '';
    for (i = 0; i < myList.length; i++) {
      list += '<li><a href="#">' + myList[i] + '</a></li>';
    }

    $('#myList').empty();
    $('#myList').append(list);
}

$(function() {
  var list = ["foo", "bar"]
  bingNetworksList(list);
  $('#myList').click(function(evt) {
    var listItem = $(evt.target).text();
    console.log(listItem); // never logged
  });
});

Answer 2

您需要将this包裹在$内，如下所示：

$(function() {
  $('#myList').click(function() {
    var listItem = $(this).find('a').text();
    console.log(listItem); // will always be logged
  });
});

使用jQuery在填充列表中的每个项目上单击事件

2 个答案: