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);
    });
});