如何在頁面加載後立即顯示隨機報價？

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

嘗試刪除點擊偵聽器。裏面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>

Answer 2

取出的onClick監聽器，這樣當你調用該函數將直接更新。

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

    }); 
}