jQuery on（'click'）仅工作一次

Question

我知道有很多这样的问题，但仍然无法解决。

<div class="message"></div>
<button id="getMessage">Get Quote</button>

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data) {
    var content = data[0].content + data[0].title;
    $("#getMessage").on("click", function() {
        $(".message").html(content);
    });
});

问题是on("click")只能使用一次，但是我希望它在每次单击按钮时都可以使用。 我究竟做错了什么？

Answer 1

您似乎以为只是因为“ quotesondesign”给您一个随机报价，所以var content在生成进一步的随机报价方面具有神奇的魔力。 不是这种情况。

您on('click')所做的所有事情都是获取并显示单个随机报价。 如果已经显示，它将再次显示它，替换第一个并且似乎什么也没做。

您需要将$.getJSON调用放在 on('click')以便第二次调用“ quotesondesign”来检索另一个报价。

可替换地，增加posts_per_page为较高数值得到一个选择报价，并移动var content 内的on('click')代替0与一些适当的随机数（例如， var selected = Math.floor(Math.random()*data.length), content = data[selected].content + data[selected].title; ）

Answer 2

尝试这个：

$("#getMessage").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data) {
        var content = data[0].content + data[0].title;
        $(".message").html(content);
    });
});