使列表项可在JavaScript中单击

Make List Items Clickable in JavaScript

本文关键字：JavaScript 单击 列表      更新时间：2023-09-26

我正在使用Phonegap开发一个Android应用程序。在这个应用程序中，我集成了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;
}

您可以将您的"好友标记"包装在<li>中，例如：

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

然后使用jQuery将点击绑定到<li>s:

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

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告诉的那样

相关文章：