Twitter Clone: Help with adding click event to specific HTML element

Twitter Clone: Help with adding click event to specific HTML element
0

#1
  function displayTweet(index) {
      var tweet = streams.home[index];
      
      var $tweet = $('<div class="tweet"><div class="row"><a class="user">'+tweet.user+'</a><div class="time-stamp text-right">'+jQuery.timeago(tweet.created_at)+'</div></div><div class="row"><p class="message">'+tweet.message+'</p></div></div>');

      $_____.click(function() {
           var user = $(this).text().trim();
           tweetEvents.filterByUser(user);
      });


      $tweet.prependTo($tweetStream);
      $tweet.animate({'opacity': '1'}, 'slow');
    }

Hi everyone,

I am trying to add the click event above to the HTML element with the ‘user class (’.user’).
I’d really appreciate any help with filling out the blank in the code above.

Thanks,
Nick


#2
$('.user').click(function() {
           var user = $(this).text().trim();
           tweetEvents.filterByUser(user);
      });

Is this what you need? Have a look at jQuery selectors


#3

No, that doesn’t work.

What I am trying to do is add a click event handler every time a tweet is displayed.

Here is my full code:

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <script src="jquery.timeago.js"></script>
    <link href="twittler.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">

      
      <div id="clear-filter">Back to Hack Reactor</div>

      <div class="profile-dashboard">

        <div class="profile-card">
          <div class="profile-card-top">
          </div>
        </div>
        
        <div id="timeline">
          <div id="new-tweet-alert">There is nothing new</div>
          <div id="tweet-stream">
           <!-- TWEETS GO HERE -->
         </div>
        </div>

      </div>


    </div>
    <script>

      $(document).ready(function(){
        /*
        var $body = $('body');
        $body.html('');

        var index = streams.home.length - 1;
        while(index >= 0){
          var tweet = streams.home[index];
          var $tweet = $('<div></div>');
          $tweet.text('@' + tweet.user + ': ' + tweet.message);
          $tweet.appendTo($body);
          index -= 1;
        }
        */

        //Get the current number of tweets
        function tweetCount() {
          return streams.home.length;
        }

        function displayTweet(index) {
          var tweet = streams.home[index];
          
          var $tweet = $('<div class="tweet"><div class="row"><a class="user">'+tweet.user+'</a><div class="time-stamp text-right">'+jQuery.timeago(tweet.created_at)+'</div></div><div class="row"><p class="message">'+tweet.message+'</p></div></div>');

          $('.user').click(function() {
               var user = $(this).text().trim();
               tweetEvents.filterByUser(user);
          });


          $tweet.prependTo($tweetStream);
          $tweet.animate({'opacity': '1'}, 'slow');
        }

        function displayNewTweets() {
          for (var i = currTweetCount; i < newTweetCount; i++) {
            displayTweet(i);
            //read[i] = true; //the tweet has been read
          }
          currTweetCount = newTweetCount;
          $newTweetAlert.html('Waiting for new tweets...');
        }

        // Check for new tweets periodically
        function checkForNewTweets() {
          // Check the current tweet count
          newTweetCount = tweetCount();
          // If current count is greater than original count
          if (newTweetCount > currTweetCount) {
            // Display new tweet alert with the number of new tweets available
            $newTweetAlert.html('You have <strong>' + (newTweetCount - currTweetCount) + '</strong> new tweets!');
          }
          setTimeout(function() {
            checkForNewTweets(tweetCount());
          }, Math.random() * 7000);
        }

        function filterByUser(user) {
          var tweets = $('.tweet');
          for (var j = 0; j < tweets.length; j++) {
            var currentUser = tweets.eq(j).find('.user').text().trim();
            if (currentUser !== user) {
              tweets.eq(j).slideUp();
            }
          }
          //make the clear filter button appear
          $clearFilter.slideDown();
        }

        function clearFilter() {
          $('.tweet').css('display', 'block');
          $clearFilter.css('display', 'none');
        }

         //Save DOM elements
        var $tweetStream = $('#tweet-stream');
        var $newTweetAlert = $('#new-tweet-alert');
        var $clearFilter = $('#clear-filter');

        // Get it started!!!
        var currTweetCount = 0;
        var newTweetCount = tweetCount();
        displayNewTweets();

        //An array that will hold the read status of all tweets
        //var read = {};

        var index = streams.home.length-1;

        /*
        //display first 11 tweets on page load
        while (index >= 0) {
          var newTweet = displayTweet(index);
          //read[index] = true;
          index -= 1;
        }
        */

        //check for more tweets
        checkForNewTweets();

        $newTweetAlert.click(function() {
          displayNewTweets();
        });
        //This method is a shortcut for .on( "click", handler ). The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released.

        //GOT TO MAKE THIS SPECIFIC TO CLICKING ON THE ACTUAL TWITTER USERNAME
        /*
        $('.tweet').click(function () {
          var user = $(this).find('.user').text().trim();
          filterByUser(user);
        });
        */

        $clearFilter.click(function() {
          clearFilter();
        });

      });
    </script>
  </body>
</html>

#4

Maybe if you try this

      $('.user').click(function(e) {
           var user = $(e.target).text().trim();
           tweetEvents.filterByUser(user);
      });

Otherwise I dont know how to help you.


#5

I figured it out!

The problem was the tweetEvents. That was a code remnant that I thought I deleted. The click event handler was being added to the HTML element, but when I was clicking on it, the filterByUser() wasn’t being called.

Thanks for your help!