javascript - 页面加载后如何显示随机报价？

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

这是我的代码：

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

最佳答案

尝试删除点击监听器。在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>

关于javascript - 页面加载后如何显示随机报价？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44714838/