2016-09-27 9 views
0

ランダムクォートジェネレータを作成しています。 「見積もり」ボタンをクリックするたびに、新しい見積もりがAPIから生成され、背景色が変更されます。ただし、クリックするたびに背景色が変わりますが、最初にボタンをクリックしたときにのみ引用符が変わります。jQueryクリックは一度だけ発生します

次のように私のHTMLは次のとおりです。任意の助け

$(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>"); 
     }}); 
    }); 
}); 

ありがとう:

<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> 

私のjQueryのは、この(私はrandColorおよび他のいくつかの非重要な部分のコードを除外)のように見えます!

+0

あなたの答えはここです:http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements –

+0

あなたのajaxでconsole.log(結果)コールバック、複数回クリックすると、コンソールに変数が表示されますか? – Cruiser

+0

彼女はrandColorがあると言いましたが、ここではスニペットに入れませんでした。 –

答えて

0

あなたのURLにエラーが発生しているようだ:

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

は、あなたがウェブインスペクタのAjaxリクエストボタンをクリックするたびに参照していますか?

よろしく、

ジミー

EDIT:

問題は、テキストの色です: それはBGと同じです。

てみJSでこの行を追加する:

$( "引用。 ")、CSS(" 色"、 "黒");。

関連する問題