检查元素是否被点击无效 jquery

Question

我有一个对话框，它从 ajax 调用中获取学生列表，我正在使用 jquery 的 .html() 方法加载数据。

我把这样的html数据放到对话框里box.I想给每个学生起名字clickable.When我先点一下，选中的背景.student_list_div应该是green。如果我再次点击，我应该使它成为 background none。如果再次点击，颜色应该是绿色，以便让用户知道它被选中或者 not.I 已经完成了 jquery 方法also.But 无法正常工作。

<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

撇开任何其他问题不谈，内联元素（如锚点）不能包含块元素（如 div ).

内部元素使用 <span>s。

Answer 2

您正在点击处理程序中绑定点击事件处理程序。删除 $(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;
 });

重要：锚 a 不能包含 div，请改用 span

Answer 3

您不需要在第一个点击事件处理程序中绑定额外的点击事件处理程序。另外我认为你不会将点击的属性更改为 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”class 并使用 jQuery 的 toggleClass 在单击时切换它来实现相同的效果。

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

.clicked {
  background-color: green;
}

Answer 4

您所需要的只是动态创建的元素的事件绑定。看到这个：

Event binding on dynamically created elements?

检查元素是否被点击无效 jquery

checking an element is clicked not working jquery

css

jquery

click