加载页面时如何从按钮执行功能答案

【问题标题】：How can I execute a function from a button when I load the page加载页面时如何从按钮执行功能
【发布时间】：2017-04-06 20:27:56
【问题描述】：

我的问题是我有一个按钮，并且我创建了在您单击按钮时执行的内容，但现在我需要在加载页面时执行这些内容，就像我按下按钮一样。

我有一个非常简单的页面，每次单击“新报价”按钮时，它都会显示一个新报价，我的问题是当我加载页面时，显示的报价不是来自 jquery，而是HTML 一。如果我得到了我想要的，应该会显示一个新的引用，而不是 HTML 中的默认引用。

我尝试创建一个像randomQuote () { stuff } 这样的通用函数，然后这样做$("#getMessage").on("click", randomQuote());

但是没用，我是JS新手！我希望你们能帮忙！非常感谢。

$(document).ready(function() {

    var url = ('https://api.myjson.com/bins/gi3r7');

    function pastelColor() { // LBH QVQ VG!
        var newArr = '';
        for (var i = 0; i < 6; i++) {
            var random = Math.floor((Math.random() * 10) + 1);
            newArr += String.fromCharCode((random % 5) + 65);
        }
        return newArr;
    }

    $("#getMessage").on("click", function(ev) {
        $("body").css("background-color", '#' + pastelColor());
        // $("body").css("background-color", '#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1));
        $.getJSON(url, function(json) {
            var html = "";
            var random = Math.floor((Math.random() * Object.keys(json).length) + 1);
           
            while (json[random].quote.length > 150) {
                random = Math.floor((Math.random() * Object.keys(json).length) + 1);
            }

            html += "<h2>" + json[random].quote + "</h2>";
            html += "<footer>" + json[random].author + " in <cite>" + json[random].source + "</cite></footer><br>";

            // Thanks to chris-francis from Stackoverflow for providing the solution below!
            // http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents

            ev.preventDefault();
            $('#tweetBtn iframe').remove();
            var tweetBtn = $('<a></a>')
                .addClass('twitter-share-button')
                .attr('data-size', 'large')
                .attr('data-hashtags', 'freecodecamp')
                .attr('href', 'http://twitter.com/share')
                .attr('data-text', json[random].quote + " by " + json[random].author);
            $('#tweetBtn').append(tweetBtn);
            twttr.widgets.load();

            $(".quote").html(html);
        });
    });
});

body {
    background: orange;
}

.block {
    left: 30%;
    width: 40%;
    height: 35%;
    top: 30%;
    position: absolute;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Random Quotes</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
</head>

<body>
    <div class="container-fluid">
  <div class="block">
    <div class="quote">
      <h2>"All we have to decide is what to do with the time that is given to us."</h2>
      <footer>Gandalf in
        <cite title="Source Title">The Lord of the Rings</cite>
      </footer>
      <br>
    </div>
    <div class="row">
      <button type="button" id="getMessage" class="btn btn-primary twitter-share-button">New Quote</button>
    </div>
    <div id="tweetBtn">
      <br>
      <a class="twitter-share-button" href="http://twitter.com/share" data-size="large" data-text="'All we have to decide is what to do with the time that is given to us.'" data-hashtags="freecodecamp" data-show-count="false">Share</a>
      <script>
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      </script>
    </div>
  </div>


</div>
</body>


</html>

【问题讨论】：

$("#getMessage").click() ?
如果您将 $("#getMessage").on("click", randomQuote()); 更改为 $("#getMessage").on("click", randomQuote); 它应该可以工作（当前您正在调用该函数，而不是设置它）。问候。
@Zzeks 您在问“如何将函数绑定到按钮单击并在页面加载时运行它？”或者只是“如何将功能绑定到按钮？”

标签： javascript jquery html css

【解决方案1】：

你做到了

$("#getMessage").on("click", randomQuote());

randomQuote() 调用该函数。像这样随机引用就行了

$("#getMessage").on("click", randomQuote);

它应该可以正常工作。

JSFiddle

【讨论】：

对不起，我误解了 OP 的问题，这是正确的
非常感谢，这正是我想要的！抱歉这个令人困惑的问题。