Javascript One onclick Return Дважды результат?

Question

Это мой код

<div class="rating"> 
    @for ($i = 1; $i <= 5; $i++) 
    @if ($i <= ceil($rating[0]->average)) 
     <i id="{{$i}}" style="cursor:pointer" class="fa fa-star rating"></i> 
    @else 
     <i id="{{$i}}" style="cursor:pointer" class="fa fa-star-o rating"></i> 
    @endif 
    @endfor 
</div> 

Мой Javascript

<script type="text/javascript"> 
$('.rating').click(function() { 
    var id = $(this).attr('id'); 
    $.ajax({ 
     url: "{{url('rating')}}", 
     type: "POST", 
     data: { id_artikel: "{{$artikel->artikel_id}}", _token: '{{ csrf_token() }}', value:id}, 
     success: function(response){ 
      alert('Bintang berhasil anda berikan!'); 
     }, 
     error: function(){ 
      alert('Bintang gagal anda berikan!') 
     } 
    }); 
}); 

</script> 

Когда я нажимаю я получил в два раза результат. Сначала дайте правильный «id», а другие - null. Я пытался использовать unbind, но все же даю мне двойной результат. Я также пытаюсь сделать только один и все равно дать мне результат в два раза.

Answer 1

Это потому, что у вас есть два элемента в одном дереве DOM с классом rating.

Предлагаю переименовать класс вашего верхнего элемента <div> в нечто другое.