html 传入函数时 onclick 不起作用

Question

我知道有一些关于此的帖子，但是 none 非常适合我正在寻找的内容。

我正在创建一个简单版本的 Twitter。我的目标就是单击用户的句柄（用户 link），然后显示他们所有的推文。我正在使用 html 的 onclick 并传入一个函数，但是会显示：@[object Object],[object Object]: [object Object],[object Object] [object Object],[object对象]

推文全部被清除，但现在没有推文显示。看起来在 js 控制台中我得到了正确的对象（人的推文），但它们只是没有正确显示在页面上。你知道这里需要发生什么吗？在正确方向上的任何帮助都会很棒。

这是我的相关代码：

  var tweetCount;
  var newCount;

  var initialTweets = function() {
    tweetCount = streams.home.length;
    for(var i = 0; i < tweetCount; i++) {
      var tweet = streams.home[i];
      displayTweet(tweet);
    }
  };

  var extraTweets = function() {
    newCount = streams.home.length;
    for(var i = tweetCount; i < newCount; i++) {
      var tweet = streams.home[i];
      displayTweet(tweet);
    }
    tweetCount = newCount;
  };


  var displayTweet = function(tweet) {
    var $tweet = $('<div></div>');
    var userLink = "<a href='#' onclick='displayUserTweets("+ tweet.user +")'>" + tweet.user + "</a>";
    $tweet.html('@' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
    $('#tweetContainer').prepend($tweet);
  };

  var displayUserTweets = function(user) {
    $('#tweetContainer').html('<div></div>');
    var $userTweets = $('<div></div>');
    var userTweets = streams.users[user];
    $userTweets.html('@' + userTweets.user + ': ' + userTweets.message + ' ' + userTweets.created_at);
    $('#tweetContainer').prepend($userTweets);
  };

  initialTweets();

  $(document).ready(function(){
    $('button').on('click', function() {
      extraTweets()
    });
  });

Answer 1

您在这里将用户作为 onclick 处理程序传递，它应该是 javascript 函数。

var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

"tweet.user" it should be javascript function name like below:

function showUserTweets(username) {
    // write you logic here to get the user tweets by using his username;
}

因此您的代码将如下所示：

var userLink = "<a href='#' onclick='showUserTweets(\""+ tweet.user +"\")'>" + tweet.user + "</a>";

注意：您tweet.user必须return字符串值。对于对象，您已使用 JSON.strigify(object) 方法将对象转换为 JSON 字符串。

希望对您有所帮助！

Answer 2

我发现您将一个变量传递给了 onclick。这不是一个有效的方法。这样 tweet.user 就不是一个有效的方法。

var displayTweet = function(tweet) {
    var $tweet = $('<div></div>');
    var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

    $tweet.html('@' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
    $('#tweetContainer').prepend($tweet);

  };

我在这里写解决方案：首先创建一个函数

  function yourFunction(){

   // do your stuff
    }

然后您可以使用以下其中一项替换您的线路进行呼叫：

var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";

至此

var userLink = "<a href='javascript:void(0);' onclick='yourFunction('+"'"+ tweet.user +"'"+")'>" + tweet.user + "</a>";

或

var userLink = "<a href='javascript:yourFunction('+"'"+tweet.user+"'"+');'

并删除这些功能

html 传入函数时 onclick 不起作用

html onclick not working when passing in function

onclick