如何在页面加载后立即显示随机报价？

Question

我正在开发一个随机报价应用程序。单击新报价按钮时会显示报价，但我希望页面加载时已显示报价。我调用了一个函数，但它仍然不起作用。谢谢！

这是我的代码：

$(document).ready(function() {
  function randomQuote() {
    $('#get-quote').on('click', function(e){
      e.preventDefault();
      // Using jQuery
      $.ajax( {
          url: "http://quotes.stormconsultancy.co.uk/random.json",
          dataType: "jsonp",
          type: 'GET',
          success: function(json) {
             // do something with data
             console.log(json);
             data = json[0];
             $('#quotation').html('"'+json.quote+'"');
             $('#author').html('-- '+json.author+' --');
             $('a.twitter-share-button').attr('data-text',json.quote);
           },

      });

    });
    $('#share-quote').on('click', function() {
         var tweetQuote=$('#quotation').html();
         var tweetAuthor=$('#author').html();
         var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
         window.open(url)
    });

  }
  randomQuote();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

删除 onClick 侦听器，以便在您调用该函数时它会直接更新。

function randomQuote() {
   $.ajax( {
      ...
      success: function(json) {
         ... //do updates
       },

  });
}

Answer 2

尝试移除点击监听器。在 randomeQuote() 中删除点击监听器。

让您的点击监听器远离 document.ready

$(document).ready(function() {
       randomQuote(); // call initially and get random quote
});


function randomQuote() {
   
      $.ajax( {
          url: "https://quotes.stormconsultancy.co.uk/random.json",
          dataType: "jsonp",
          type: 'GET',
          success: function(json) {
             // do something with data
            
             data = json[0];
             $('#quotation').html('"'+json.quote+'"');
             $('#author').html('-- '+json.author+' --');
             $('a.twitter-share-button').attr('data-text',json.quote);
           },

      });

    $('#share-quote').on('click', function() {
         var tweetQuote=$('#quotation').html();
         var tweetAuthor=$('#author').html();
         var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
         window.open(url)
    });

  }
  
 $('#get-quote').on('click', function(e){
      e.preventDefault();
      randomQuote();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="get-quote">get quote</button>

<div id="quotation"></div>

如何在页面加载后立即显示随机报价？

How to display a random quote as soon as page loads?

javascript

jquery

random

onload

quote