Make List Items Clickable in JavaScript

Question

I am developing an Android app using Phonegap. In this app I have integrated Facebook login module. After user gets login into app, he/she can see friend list of his/her. I have done till this. What I have to do is, on clicking the particular friend name, that friend name should be added to another list. But my problem is this friend list is not clickable. How to make dynamic list clickable?Below is my code. What am I missing?

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

You can wrap your 'friend-markup' for example in <li>s like that:

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

and then use jQuery to bind clicks to the <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;
}

Then write handler function

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

Or you can use jQuery to bind click event on element as @MiRaIT told