JQuery - click event for specific text?

Question

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
    <title> Twiddler </title>
  </head>
<body class='box'>
  <body>
    <div class='container'>
      <h1 class='title'>My Twiddler</h1>
    <div class='main'>
      <h2>Tweet Feed</h2>
      <p class='tweets'></p>
      <p class='new'></p>
      <button class='button'>New Tweets</button>
     </div>
    </div>

    <script>
      $(document).ready(function(){
        var $body = $('.main');

        var index = streams.home.length - 1;
        while(index >= 0){
          var tweet = streams.home[index];
          var $tweet = $('<p></p>');

          $tweet.text('@' + tweet.user + ': ' + tweet.message + tweet.created_at);
          $tweet.appendTo('.tweets');
          index -= 1;
        }

        //show new tweets using button
        var $button = $('.button');
        $button.click(function() {
          //get random tweet
          //streams.home is an array of all tweets of all users
          var tweet = streams.home[Math.floor(Math.random() * streams.home.length)]
          var $tweet = $('<p></p>');
          $tweet.text('@' + tweet.user + ': ' + tweet.message + tweet.created_at);
          $tweet.appendTo('.tweets');
        })

        //click on user to see tweet history
        $body.click(function() {

        })

        //styling
        $('.box').css("background-image", "url('https://www.rightmixmarketing.com/wp-content/uploads/2016/04/Twitter-Background.png')");
        $('.title').css('font-size', '40px').css('text-align', 'center');
        $('h2').css('text-align', 'center');
      });

    </script>
  </body>
  </body>
  </div>
</html>

I'm making a twitter look a like. I am trying to show a users history by being able to click on the username and displaying all current tweets. How can I go about and do this? I have it set to click on the body of my text but obviously that is not the right way. How can I specifically target the username in this case? I attached a picture of my current html

It's not really clear what you're asking. Your code already attaches a click event to an HTML element, and you're asking how to attach a click event to an HTML element? What isn't working? — David, Mar 15 '20 at 00:52
Sorry for not being clear. I have a click event for a button which is shown as "New Tweets". I'm trying to set up another click event specifically to be able to click on usernames on the html page. For example, if I clicked on douglascalhoun. The page would show only his tweets and everyone else's tweets would be hidden. The problem is that I'm not sure how to target the username part on the html to set it up for a click event — NewAtLearningThis, Mar 15 '20 at 00:55
It doesn't matter if it's a button or any other element, a click event is a click event. Simply attach the event to your other target element(s). Note that if the elements are dynamically added to the page after it loads then you would want to make use of `.on()` to bind to a parent element instead: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — David, Mar 15 '20 at 00:57
That's what I'm not understanding. I don't know how to target the element I want for my click event because everything I'm making is within their own functions — NewAtLearningThis, Mar 15 '20 at 01:08
Well, what is the HTML that you're trying to target? It looks like you're just putting all of the text into a single `
` element? If that's the only element you have then that's what you can target. If you put more specific elements within it then you can target any of those. — David, Mar 15 '20 at 01:09

score 1 · Answer 1 · answered Mar 15 '20 at 01:39

How to register the event clicking just on 'username' part of the text?

Consider the following:

<p>
    <a class='click-me' >Username</a>
    There is a lot of text here. 
    There's some more text here. I want to be able to click ...
</p>

So you just need to wrap the username in an html element which has a certain class.

Then, you specify a listener for the click event on that class:

$('.click-me').on('click', function() {
    //do something
});

Now, you probably need to know which username we're talking about and how to get the specific posts, for that there are other solutions. But this one answers your question in specific.

JQuery - click event for specific text?

1 Answers1