jQuery - Simple“on（'click'）”选择器问题

Question

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

生成的代码：

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

正如你所看到的，一旦用户选择了“聘任”的div，但它确实一个滑动开关，显示出两个的div（c_info和c_functions）的更多信息。我需要用户能够选择按钮（class =“view_notes”）。我似乎无法得到正确的选择器。我标记了我遇到的问题。目前，一个简单的“警报”就足够了。

在此先感谢您的帮助。

Answer 1

也许父节点尚不存在。如果是这样的话，这应该工作：

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

希望这有助于。欢呼声

Answer 2

试试这个

$(".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正在创建页面，PHP不会通过AJAX加载内容。如果是这样，那么您可能需要直到内容加载成功，然后才能绑定，因为DOM元素可能仍然不存在。

Answer 3

的问题是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