jQuery - Simple "on('click')" Selector Issue

Question

I have a PHP script that generates the following HTML inside a div (id="schedule_wrapper_all").

generated code:

<div class="appointments">
    <div class="weekday" value="2014-01-08">Wednesday 01/08</div>
    <div class="appt" value="2">
        <p class="c_name"></p>
        <div class="c_info" style="display: none;">
            <p class="c_street"></p>
            <p class="c_city"></p>
            <p class="c_time"></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"></p>
            <p class="c_city"></p>
            <p class="c_time"></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="weekday" value="2014-01-10">Friday 01/10</div>
    <div class="appt" value="10">
        <p class="c_name">Nancy </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>

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

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.

Thanks in advance for any help.

Answer 1

Try this

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

If necessary you could even go a little stricter if you want to make sure it only effects view notes in c_function like like this

$(".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

I am assuming that that the PHP is not loading the content via AJAX since you mentioned PHP is creating the page. If it is, then you might need till success of the content load and then do you bind, since the DOM elements might still not exist.

Answer 2

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

Answer 3

The problem is the appointments element also is dynamically loaded, so you need to bind the click handler to the schedule_wrapper_all element

$('#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