检查一个元素被点击不工作jquery

Question

我有一个对话框，从ajax调用中获得学生列表，我用jQuery的.html()方法加载数据。

我把这样的html数据放到对话框中。我想让每个学生的名字都是可点击的。当我点击第一个时，所选.student_list_div的背景应该是​​。如果我再次点击，我应该使它background none。如果再次点击，颜色应该是绿色的，以使用户知道它被选中或不。我也做了jquery方法，但它不能正常工作。

<a href='' class='student_list' id='studentid1'><div class="student_list_div"> 
StudentName1</div></a> 
<a href='' class='student_list' id='studentid2'><div class="student_list_div"> 
StudentName2</div></a> 
and so on....... 

我的jquery方法是这样的。

$("#dialog_wrapper").on('click','.student_list',function(){ 
      if($(this).data('clicked')) 
      { 
       $(this).find('.student_list_div').css('background-color','none'); 
      } 
      else 
      { 
       $(this).click(function(){ 
        $(this).data('clicked',true); 
        $(this).find('.student_list_div').css('background-color','green'); 
       }); 
      } 


      return false; 
     }); 

请帮我

Answer 1

你并不需要你的第一个点击事件中绑定额外的点击事件处理处理程序。此外，我认为如果它是真实的，你不会将clicked属性更改为false。

$("#dialog_wrapper").on('click', '.student_list', function() { 
 
    if ($(this).data('clicked')) { 
 
    $(this).find('.student_list_div').css('background-color', 'none'); 
 
    $(this).data('clicked', false); 
 
    } else { 
 
    $(this).data('clicked', true); 
 
    $(this).find('.student_list_div').css('background-color', 'green'); 
 
    } 
 

 

 
    return false; 
 
});

而且你可以通过具有“.clicked”类和使用jQuery的toggleClass到点击时切换它达到同样的效果。

$("#dialog_wrapper").on('click', '.student_list', function() { 
 
    $(this).find('.student_list_div').toggleClass('.clicked') 
 
});

.clicked { 
 
    background-color: green; 
 
}

Answer 2

除此之外的任何其他问题，直列元素，就像一个锚，不能包含块元素（如一个div）。

改为使用<span> s作为内部元素。

Answer 3

您正在绑定单击处理程序中的单击事件处理程序。删除$(this).click(function(){

使用

$("#dialog_wrapper").on('click', '.student_list', function() { 
    if ($(this).data('clicked')) { 
     $(this).find('.student_list_div').css('background-color', ''); 
    } else { 
     $(this).data('clicked', true); 
     $(this).find('.student_list_div').css('background-color', 'green'); 
    } 
    return false; 
}); 

重要：锚一个不能包含div，使用span代替

Answer 4

所有你需要的是事件动态创建元素的结合。看到这个：

Event binding on dynamically created elements?