Сделать элементы списка кликабельными в JavaScript

Question

Я разрабатываю приложение для Android с использованием PhoneGap. В этом приложении я интегрировал модуль входа в Facebook. После того, как пользователь войдет в приложение, он / она сможет увидеть список своих друзей. Я сделал до этого. Что я должен сделать, нажав на имя конкретного друга, это имя друга должно быть добавлено в другой список. Но моя проблема в том, что этот список друзей не кликабелен. Как сделать динамический список кликабельным? Ниже приведен мой код. Что мне не хватает?

xyz.html

  <div class="section">
          <h1>Get user's friends</h1>
          <div id="user-friends"></div>
          <div class="button button-requires-connect"              onclick="getUserFriends();hideButton(this);" />Get your friends</div>

          <div class="info-requires-connect">You need to login before you can use this functionality.</div>


        </div>

pqr.js

function getUserFriends() {
  var markup = '<div class="data-header">Friends</div>';

  for (var i=0; i < friendsInfo.length && i < 25; i++) {
    var profilePictureUrl = '';
    if (friendsInfo[i].picture.data) {
      profilePictureUrl = friendsInfo[i].picture.data.url;
    } else {
      profilePictureUrl = friendsInfo[i].picture;
    }
    markup = markup + '<img src="' + profilePictureUrl + '">' + friendsInfo[i].name + '<br />';
  }

  document.getElementById('user-friends').innerHTML = markup;
}

Answer 1

Вы можете обернуть свою "разметку друга", например, в <li>вот так:

markup = markup + '<li><img src="' + profilePictureUrl + '">' + friendsInfo[i].name + '</li>'

а затем использовать JQuery для привязки кликов к <li>s:

$('#user-friends').on('click', 'li', function() {
  ... do something
});

Answer 2

function getUserFriends() {
  var markup = '<div class="data-header">Friends</div>';

  for (var i=0; i < friendsInfo.length && i < 25; i++) {
    var profilePictureUrl = '';
    if (friendsInfo[i].picture.data) {
      profilePictureUrl = friendsInfo[i].picture.data.url;
    } else {
      profilePictureUrl = friendsInfo[i].picture;
    }
    var clickableName = '<a href="" onclick="handleClick(this); return false;">' 
        + friendsInfo[i].name + '</a>';
    markup = markup + '<img src="' + profilePictureUrl + '">' + clickableName + '<br />';
  }

  document.getElementById('user-friends').innerHTML = markup;
}

Затем напишите функцию-обработчик

function handleClick(element/*which friend was clicked*/)
{
    //do something with your friend
}

Или вы можете использовать jQuery для привязки события клика на элементе, как сказал @MiRaIT