javascript - Jquery click 事件不会触发不止一次

Question

我遇到了一个问题，我的 JQuery 单击事件只触发一次。基本上，我设置了一个小页面，上面有一个按钮，上面写着“生成流行语”。当您单击该按钮时，div“Oren-is”清空，另一个 div 淡出。然后，将数组中的字符串附加到清空的 div。所有这些现在都可以正确地使用代码，但只会发生一次。

我敢肯定这是一个非常简单的问题:基本上，我如何让这种情况发生不止一次？在我第一次点击“生成流行语”之后，一切都正确地触发了。但是，我不能多次点击它!

这是我的代码:

var $buzzwords = ["Oren Weingrod is object-oriented.", "Oren Weingrod is agile.", "Oren Weingrod is a human.", "Oren Weingrod is analytics driven.", "Oren Weingrod is dynamic!", "Oren Weingrod is lean", "Oren Weingrod is tele-commuting", "Oren Weingrod is integration testing"];

var $buzz = $('.generate-buzzword');
$(document).ready(function(){
var random = Math.floor((Math.random(8))*10);
alert(random);
$buzz.on("click", function(){
    $('#smalltext').remove();
    $('#oren-is').empty();
    $('#oren-is').append($buzzwords[random]);

    });
});

相关的 HTML:

<section id="oren">
            <p id="oren-is">Oren* Weingrod is not a pine tree. </p> 
            <a href="#" class="generate-buzzword"> Generate Buzzword </a> 
            <p id="smalltext">*Oren means pine tree in Hebrew.</p>
</section>

Answer 1

为了配合我的评论，更改您的代码以在每次点击时实际生成一个新的随机数:

$buzz.on("click", function(){
  var random = Math.floor((Math.random($buzzwords.length))*10);
  $('#smalltext').remove();
  $('#oren-is').empty();
  $('#oren-is').append($buzzwords[random]);

  });
});

我也做到了，所以你的魔法数字“8”现在是你的流行语数组的长度，所以当你添加/删除时，你不必更新你的代码 =)