クリック時のjQueryの動作が異なります

Question

私はサーバレスポンスから受け取ったいくつかの条件に従ってhtml要素を生成しています。同じ内部でこのような

@if($candidate->status == "new") 
    @if($candidate->priority == "") 
    <a id = "prioritize" data-value = "{{$candidate->id}}" ><img id = "priority" src="icons/non_priority.png"></img></a> 
    @else if($candidate->priority == "yes") 
    <a id = "prioritize" data-value = "{{$candidate->id}}" ><img id = "priority" src="icons/priority.png"></img></a> 
    @endif 
@endif 

とさらにいくつかの条件

@if($candidate->status == "scheduled") 
@endif 

@if($candidate->status == "good") 
@endif 

@if($candidate->status == "bad") 
@endif 

場合on click機能は、「新しい」condtionが満たされたときに読み込まれる要素でのみ動作します。

@if($candidate->status == "new") 
@endif 

他の条件で入力された他の要素では機能しません。しかし、私はnewの状態のコメント。 "good"や "bad"や "scheduled"のようないくつかの条件が成立します。

$(document).ready(function(){ 

$('#favorite').on('click',function(){ 
    if ($(this).find('img').attr('src','icons/non_star.png')) { 

      var candidate_id = $(this).data('value'); 
      alert(candidate_id); 
    } 
}); 

$('#prioritize').on('click',function(){ 
    if ($(this).find('img').attr('src','icons/non_priority.png')) { 

      var candidate_id = $(this).data('value'); 
      alert(candidate_id); 
    } 
}); 

}); 

クリックしたすべてのIDは同じですが、この背後にある問題はわかりません。

Answer 1

htmlのIDは一意です。 class属性を使うべきです。 クラスごとにidを変更し、jqueryでidを#classで変更します。

.attr（attributeName、value）は属性値を設定するために使用され、彼女をテストしません。 .attr（attributeName）=== 'value'を使用 このテストにdata- *属性を追加して、より確実な解決方法を指定することもできます。

Answer 2

idは常にhtml要素で一意であるため、複数回表示されるhtml要素にはclassを使用する必要があります。クラスを追加し、コードを次のように変更してください

$('.favorite').on('click',function(){ 
if ($(this).find('img').attr('src','icons/non_star.png')) { 

     var candidate_id = $(this).data('value'); 
     alert(candidate_id); 
} 
    }); 

Answer 3

ステータスに応じて要素に異なるIDを指定するか、クラス名を使用して呼び出す必要があります。