jQuery-简单的"on('click')"选择器问题 [英] jQuery - Simple "on('click')" Selector Issue

问题描述

我有一个PHP脚本，可在div(id ="schedule_wrapper_all")内生成以下HTML.

I have a PHP script that generates the following HTML inside a div (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代码:

There are multiple 'appointments', with a few buttons within each 'appt' div. I'm trying to select the button (class="view_notes") from within the selected 'appt' div. Here's the jQuery code I've been writing:

$(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").我似乎找不到正确的选择器.我标记了我遇到问题的区域.现在，一个简单的警报"就足够了.

As you can see, once a user selects an 'appt' div, it does a slide toggle, showing more information in two more divs (c_info and c_functions). I need the user to be able to select the button (class="view_notes"). I can't seem to get the right selector. I marked the area where I'm having issues. For now, a simple "alert" will suffice.

在此先感谢您的帮助.

推荐答案

父节点可能还不存在.如果是这样，这应该可行:

Maybe the parent node doesn't exist yet. If that's the case, this should work:

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

如果上述方法有效，则可以优化选择器(更清洁，性能更高):

If the above works, you can refine your selector (cleaner and more performant):

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

希望这会有所帮助.干杯

Hope this helps. Cheers

这篇关于jQuery-简单的"on('click')"选择器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！