“点击”事件仅在首次点击时触发，而在第二次点击时不触发

Question

我有五个元素，并且希望在单击其中之一时发生某些事情。 第一次单击时，我的代码运行良好，但第二次单击时未触发该事件。 知道为什么吗？

 $("#ratingModal").find(".star.clickable").on("click", function () { console.log("click"); var $wrap = $(this).closest(".stars"); var count = parseInt($(this).data("star")); $.each($wrap.find(".star"), function ($index, $itm) { let current = parseInt($($itm).data("star")); $($itm).removeClass("fas"); $($itm).removeClass("far"); console.log(current); if (current <= count) { $($itm).addClass("fas"); console.log("fas"); } else { $($itm).addClass("far"); console.log("far"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="ratingModal"> <div class="body"> <div class="score-wrap"> <span class="label">Score: </span> <div class="stars"> <i class="fas fa-star clickable star star-1" title="1" data-star="1"></i> <i class="far fa-star clickable star star-2" title="2" data-star="2"></i> <i class="far fa-star clickable star star-3" title="3" data-star="3"></i> <i class="far fa-star clickable star star-4" title="4" data-star="4"></i> <i class="far fa-star clickable star star-5" title="5" data-star="5"></i> </div> </div> </div> </div> 

Answer 1

尝试使用off（）。on（'...'）函数

 $("#ratingModal").find(".star.clickable").off().on("click", function () { console.log("click"); var $wrap = $(this).closest(".stars"); var count = parseInt($(this).data("star")); $.each($wrap.find(".star"), function ($index, $itm) { let current = parseInt($($itm).data("star")); $($itm).removeClass("fas"); $($itm).removeClass("far"); console.log(current); if (current <= count) { $($itm).addClass("fas"); console.log("fas"); } else { $($itm).addClass("far"); console.log("far"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="ratingModal"> <div class="body"> <div class="score-wrap"> <span class="label">Score: </span> <div class="stars"> <i class="fas fa-star clickable star star-1" title="1" data-star="1"></i> <i class="far fa-star clickable star star-2" title="2" data-star="2"></i> <i class="far fa-star clickable star star-3" title="3" data-star="3"></i> <i class="far fa-star clickable star star-4" title="4" data-star="4"></i> <i class="far fa-star clickable star star-5" title="5" data-star="5"></i> </div> </div> </div> </div>