檢查一個元素被點擊不工作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?