將JQuery點擊行爲綁定到Ajax返回的元素

Question

我試圖將一個兩級點擊行爲綁定到從ajax調用返回的段落元素。這不是關於使用on（）的問題，我明白了。我想弄清楚爲什麼我的聲明的第二部分不起作用。

HTML是：

<div class="lesson odd"> 
    <p class="lesson-text 25 lesson-selected"> 
     <input type="hidden" name="lesson-id" value="25360"> 
     <input type="hidden" class="lesson-day-number" value="25"> 
     <span class="lesson-name">25 Lovely Lesson Name</span> 
     <span class="lesson-price">¥18,000</span> 
     <br> 
     <span class="lesson-short-name"></span> 
     <span class="lesson-time">1:30pm - 3:30pm</span> 
     <a class="lesson-details" href="#" data-hasqtip="2" oldtitle="Lovely description details" title=""> 
      <i class="fa fa-question-circle fa-lg lesson-desc-popup"></i> 
     </a> 
    </p> 
</div> 

jQuery是：

// bind click function 
// click on lesson to select, click again to de-select 
jQuery('p.lesson-text').on("click", function() { 

    if (jQuery(this).not('.lesson-selected')) { 

      // reset all selections for this day 
      var dayValue = jQuery(this).children().next('.lesson-day-number').val(); 
      jQuery('p.lesson-text.lesson-selected.' + dayValue).removeClass('lesson-selected'); 

      // add selected class 
      jQuery(this).removeClass('deselected'); 
      jQuery(this).addClass('lesson-selected'); 

      // set all other lessons for that day to deselected 
      jQuery('p.lesson-text.' + dayValue).not('.lesson-selected').addClass('deselected'); 


    } else if (jQuery(this).is('.lesson-selected')) { 

      // reset all selections for this day, remove all deselected 
      var dayValue = jQuery(this).children().next('.lesson-day-number').val(); 
      jQuery('p.lesson-text.lesson-selected.' + dayValue).removeClass('lesson-selected'); 
      jQuery('p.lesson-text.deselected.' + dayValue).removeClass('deselected'); 
    } 

}); // end click function 

因此，點擊行爲工作正常，第一次點擊。用戶點擊所需的課程，並添加「課程選擇」課程。如果用戶點擊不同的課程，也沒有問題。添加「課程選擇」課程，當天所有其他課程都標記爲「取消選擇」。所以看起來JQuery的頂部工作正常。

但是，當我點擊一個已經有「課程選擇」類的p.lesson文本時，什麼也沒有發生。它應該清除該p.lesson-text中的類，並清除所有其他「取消選擇」的p.lesson-text元素。我在這裏做錯了什麼？請幫忙！

Answer 1

這樣的事情？

<div class="lesson odd"> 
    <p class="lesson-text lesson-selected" day="25" lessonId="25360"> 
     <span class="lesson-name">25 Lovely Lesson Name</span> 
     <span class="lesson-price">¥18,000</span> 
     <br> 
     <span class="lesson-short-name"></span> 
     <span class="lesson-time">1:30pm - 3:30pm</span> 
     <a class="lesson-details" href="#" data-hasqtip="2" oldtitle="Lovely description details" title=""> 
      <i class="fa fa-question-circle fa-lg lesson-desc-popup"></i> 
     </a> 
    </p> 
</div> 

    $('.p.lesson-text').on("click", function() { 
     var dayValue = $(this).attr("day"); 
     var lessonId= $(this).attr("lessonId"); 
     $(this).toggleClass('deselected').toggleClass('lesson-selected'); 
    });