jQuery click only occurs once

Question

I am creating a random quote generator. Every time I click the button "Get Quote", a new quote should be generated from an API, and the background color is changed. However, while the background color changes every time I click, the quote only changes the first time I click the button.

My HTML is as follows:

<body>
<div class="container-fluid">
  <div id="centerThis" style="background: transparent">
    <div id=target1>
      <h1 class="text-center">Random Quote:</h1>
      <div class="quote">
        <blockquote>
          <p id="quoteT">Humans are allergic to change. They love to say, 'We've always done it this way.' I try to fight that. That's why I have a clock on my wall that runs counter-clockwise.</p>
          <footer id="quoteA">Grace Hopper</footer>
      </blockquote>
      </div>
      <div class="row">
        <div class="col-xs-2">
          <a href="https://twitter.com/?lang=en" target='_blank'><button onclick="tweetIt()" class="btn myButton colorButton"><i class="fa fa-twitter" aria-hidden="true"></i></button></a>
        </div>
        <div class="col-xs-2">
          <a href="https://www.tumblr.com/dashboard" target='_blank'><button onclick="tweetIt()" class="btn myButton colorButton"><i class="fa fa-tumblr" aria-hidden="true"></i></button></a>
        </div>
        <div class="col-xs-4">
        </div>
        <div class="col-xs-4">
          <button id = "getQuote" class = "btn colorButton">
        Get Quote
      </button>
        </div>
      </div>
    </div>
    <div id="target2">
      <h5 id="byAnna" class="text-center">by <a href="http://codepen.io/annajolly/" target="_blank">anna</a></h5>
    </div>
  </div>
</div>
</body>

My jQuery looks like this (I left out the code for randColor and some other un-important parts):

$(document).ready(function() {
  $("#target1").css("color",randColor);
  $("#target2").css("background", randColor);
  $("body").css("background", randColor);
  $(".colorButton").css("background", randColor);
  $("#getQuote").on("click", function(){
    randColor = getRandomColor();
    $("#target1").css("color",randColor);
    $("#target2").css("background", randColor);
    $("body").css("background", randColor);
    $(".colorButton").css("background", randColor);
    $.ajax({url: "http://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", success: function(result){
            $(".quote").html("<blockquote><p>" + result.quoteText + "</p><footer>" + result.quoteAuthor + "</footer></blockquote>");
        }});
    });
});

Thanks for any help!

your answer here: http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Razvan Dumitru, Sep 27 '16 at 15:36
if you console.log(result) in your ajax callback, does the console show the variable when you click multiple times? — Cruiser, Sep 27 '16 at 15:37
She said that randColor is in place but she didn't put it here in the snippet. — Razvan Dumitru, Sep 27 '16 at 15:39
@RazvanDumitru I don't think this is an event delegation question. — Cruiser, Sep 27 '16 at 15:39
Do you get any errors in your console? I don't think this is a problem with delegates as no elements appear to be created after the initial DOM load. — Drew Kennedy, Sep 27 '16 at 15:40
After a 2nd look, yea, probably we need more than this in order to help. — Razvan Dumitru, Sep 27 '16 at 15:40
Well then, lets test it -> https://jsfiddle.net/adeneo/doq9j3bg/ — adeneo, Sep 27 '16 at 15:41
Seems to me like setting the color to the same as the background-color makes the text not visible. — adeneo, Sep 27 '16 at 15:42
@adeneo https://jsfiddle.net/doq9j3bg/2/ still doesn't get a new quote. — Cruiser, Sep 27 '16 at 15:47
@Anna Jolly In your pen it did return a new quote after a few clicks. Have you checked the api? how many quotes are stored there? Keep in mind that ajax requests are asychronous and may not return the result immediately — Cruiser, Sep 27 '16 at 15:49
Yes, it does in fact seem to always return the same quote -> http://jsfiddle.net/adeneo/doq9j3bg/4/ — adeneo, Sep 27 '16 at 15:52

Jimmy · Answer 1 · 2016-09-27T16:03:16.453

0

It seems that you have an error on your URL:

http://crossorigin.me/http://api.forismatic...

Do you see the Ajax request on the web inspector each time you click on the button?

Regards,

Jimmy

EDIT :

The issue is the text color: It's the same as the bg.

Try to add this line in JS:

$(".quote").css("color", "black");

edited Sep 27 '16 at 16:03

answered Sep 27 '16 at 15:55

Jimmy

1
1

jQuery click only occurs once

1 Answers1