jQuery的点击行为有所不同

Question

I am generating html elements according to some condition i receive from server response.

@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

and few more like this with same inner if conditions

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

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

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

The on click function works only on elements that are populated when "new" condtion is satisfied.

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

and doesn't work on other elements that are populated by other conditions. But when i comment of new condition. Someother condition like " good " or " bad " or " scheduled " works.

$(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);
    }
});

});

I don't understand the issue behind this though all the id's clicked are same.

Answer 1

An html id is unique. You should use à class attribute. Change id by class and in your jquery change #id by .class.

.attr( attributeName, value ) is used to set attribute value and not test her. Use .attr(attributeName) === 'value' You can also add data-* attribute to this test for a solution more sure.

Answer 2

You have to use class for html elements that can appear multiple times because id s are always unique for html elements. Add class and change your code as below

$('.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，或者使用它们的类名来调用它们。