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

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>