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

Question

Here is how I populate my list:

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);
}

Here is my html file:

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

I want to add a click event for every item of list (without having separate ids):

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

However, when I click at a list item, click event doesn't fire.

What am I doing wrong?

Answer 1

I can only assume there's a js error in your console.

I've created a working sample for you. We can use event delegation and then retrieve the DOM node that was clicked. You need to ensure you call the bingNetworksList [assume typo in here and meant binD ;)] function when the DOM ready event has fired.

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

You need to wrap this inside $ as like this:

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