Question

我有一个PHP脚本，它在div中生成以下HTML（id =“schedule_wrapper_all”）。

生成的代码：

<div class="appointments">
    <div class="weekday" value="2014-01-08">Wednesday 01/08</div>
    <div class="appt" value="2">
        <p class="c_name">William Davis</p>
        <div class="c_info" style="display: none;">
            <p class="c_street">230 N State Rd</p>
            <p class="c_city">Davison</p>
            <p class="c_time">11:00:00</p>
            <p class="c_phone">Phone 1: </p>
            <p class="c_phone_alt">Phone 2: </p>
        </div>
        <div class="c_functions" style="display: none;">
            <p><button type="button" class="view_notes">View Notes</button></p>
            <p><button type="button" class="add_note">Add Note</button></p>
            <p><button type="button" class="reschedule">Reschedule</button></p>
            <p><button type="button" class="reassign">Reassign</button></p>
        </div>
    </div>
    <div class="appt" value="4">
        <p class="c_name">Mary Smith</p>
        <div class="c_info" style="display: none;">
            <p class="c_street">123 Main St</p>
            <p class="c_city">Davison</p>
            <p class="c_time">13:00:00</p>
            <p class="c_phone">Phone 1: 8104124200</p>
            <p class="c_phone_alt">Phone 2: 8109311416</p>
        </div>
        <div class="c_functions" style="display: none;">
            <p><button type="button" class="view_notes">View Notes</button></p>
            <p><button type="button" class="add_note">Add Note</button></p>
            <p><button type="button" class="reschedule">Reschedule</button></p>
            <p><button type="button" class="reassign">Reassign</button></p>
        </div>
    </div>
    <div class="weekday" value="2014-01-10">Friday 01/10</div>
    <div class="appt" value="10">
        <p class="c_name">Nancy Poole</p>
        <div class="c_info" style="display: none;">
            <p class="c_street">111 Main St</p>
            <p class="c_city">Ortonville</p>
            <p class="c_time">13:30:00</p>
            <p class="c_phone">Phone 1: 8101111111</p>
            <p class="c_phone_alt">Phone 2: 8109999999</p>
        </div>
        <div class="c_functions" style="display: none;">
            <p><button type="button" class="view_notes">View Notes</button></p>
            <p><button type="button" class="add_note">Add Note</button></p>
            <p><button type="button" class="reschedule">Reschedule</button></p>
            <p><button type="button" class="reassign">Reassign</button></p>
        </div>
    </div>
</div>

有多个'约会'，每个'appt'div内有几个按钮。我正在尝试从所选的'appt'div中选择按钮（class =“view_notes”）。这是我一直在写的jQuery代码：

$(document).ready(function() {
    $('#this_week').on('click', function() {
        $.ajax({
            method: 'post',
            url: 'scripts/get_schedule_thisWeek.php',
            success: function(data) {
                $('#schedule_wrapper_all').html(data);
                $('.c_info').hide();
                $('.c_functions').hide();
            }
        });//end ajax - Fill appointments this week
    });

   $('#schedule_wrapper_all').on('click', '.appt', function() {
        $('html,body').animate({
            scrollTop: $(this).offset().top},
        'slow');//end force to top
        $('.c_info', this).slideToggle();
        $('.c_functions', this).slideToggle();
    }); //Slide Toggle appointment information

=============================PROBLEMATIC AREA================================
    $('.appointments').on('click', '.view_notes', function(e) {
        e.stopImmediatePropagation(); //Stops the slide toggle from the .item class
        alert('hello');
    });//Open Modal to view notes
});

正如您所看到的，一旦用户选择了“appt”div，它就会进行幻灯片切换，在另外两个div（c_info和c_functions）中显示更多信息。我需要用户能够选择按钮（class =“view_notes”）。我似乎无法得到正确的选择器。我标记了我遇到问题的区域。现在，一个简单的“警报”就足够了。

提前感谢您的帮助。

Answer 1

试试这个

$(".appointments .view_notes").on('click', function(e) {
        e.stopImmediatePropagation(); //Stops the slide toggle from the .item class
        alert('hello');
    });//Open Modal to view notes

如果你想确保它只是影响c_function中的视图笔记，如果有必要，你甚至可以更严格一点

$(".appointments .c_functions>.view_notes").on('click', function(e) {
        e.stopImmediatePropagation(); //Stops the slide toggle from the .item class
        alert('hello');
    });//Open Modal to view notes

我假设PHP没有通过AJAX加载内容，因为你提到PHP正在创建页面。如果是，则可能需要内容加载成功，然后绑定，因为DOM元素可能仍然不存在。

Answer 2

问题是appointments元素也是动态加载的，因此您需要将点击处理程序绑定到schedule_wrapper_all元素

$('#schedule_wrapper_all').on('click', '.view_notes', function (e) {
    e.stopPropagation(); //Stops the slide toggle from the .item class
    alert('hello');
}); //Open Modal to view notes

Answer 3

可能父节点尚不存在。如果是这种情况，这应该有效：

$(document).on('click', '.appointments .view_notes', function(e) {        
    alert('hello');
    return false; //Also cancels default behavior
});

如果上述方法有效，您可以优化您的选择器（更干净，性能更高）：

$('#schedule_wrapper_all').on('click', '.appointments .view_notes', function(e) {        
    alert('hello');
    return false; //Also cancels default behavior
});

希望这会有所帮助。干杯

jQuery - 简单的“on（'click'）”选择器问题

3 个答案: