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');
    });

将JQuery单击行为绑定到Ajax返回的元素

1 个答案: