jQuery .on（“ click”）函數僅觸發一次

Question

我在這里注意到了很多類似的問題，但是他們的解決方案似乎沒有用。 我附加到按鈕元素的click事件僅觸發一次。 有任何想法嗎？

我的HTML

<p id="randomCatchphrase">Hello, my name is Inigo Montoya. You killed my father. Prepare to die.</p>
<p id="catch"><button class="catchbutton">Catchphrase me!</button></p>

我的JS

$(function() {
    var catchphraseArray = [
        "Good morning, Vietnam!",
        "Khaaaaan!",
        "Bueller...Bueller...Bueller?",
        "Alrighty then!",
        "I know kung fu.",
        "YOU SHALL NOT PASS!",
        "You can't handle the truth!"
    ];

    function getRandomArrayElement(myArray) {
        var randomNumber = Math.floor(Math.random() * myArray.length);
        return myArray[randomNumber];
    }
    var randomPhrase = getRandomArrayElement(catchphraseArray);

    $("#catch").on("click", ".catchbutton", function() {
        $("#randomCatchphrase").text(randomPhrase)
    });
});

Answer 1

您的click事件確實觸發了多次，但沒有看到它，因為randomPhrase的值未更改（具有第一個聲明的值） ，因此您需要在click句柄中調用函數以在randomPhrase按下按鈕時更新這些值，如下所示：

$("#catch").on("click", ".catchbutton", function() {
  // here the value will updated anytime when button was clicked
  var randomPhrase = getRandomArrayElement(catchphraseArray);
  $("#randomCatchphrase").text(randomPhrase);
});

Answer 2

randomPhrase不是調用getRandomArrayElement ，而是返回對保存為變量randomPhrase getRandomArrayElement單個調用

$("#catch").on("click", ".catchbutton", function(){
  $("#randomCatchphrase").text(getRandomArrayElement(catchphraseArray);
});