jQuery - Simple「on（'click'）」選擇器問題

我有一個PHP腳本，它在div（id =「schedule_wrapper_all」）中生成以下HTML。jQuery - Simple「on（'click'）」選擇器問題

生成的代碼：

<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」）。我似乎無法得到正確的選擇器。我標記了我遇到的問題。目前，一個簡單的「警報」就足夠了。

在此先感謝您的幫助。

來源

2014-01-12 Will Davis

也許父節點尚不存在。如果是這樣的話，這應該工作：

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

希望這有助於。歡呼聲

來源

2014-01-12 01:35:01

你的第二個建議奏效了。我很感激！ –

'e.preventDefault（）'優於返回false，主要是因爲它不是'返回'。 – qooplmao

試試這個

$(".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元素可能仍然不存在。

來源

2014-01-12 01:27:40 abritez

內容是通過AJAX生成的。我可能應該更仔細地措辭。 jQuery文件中的第一個函數是填充PHP的。如有必要，我可以顯示PHP源代碼。 –

嘗試將綁定放置在成功內部 – abritez

我通常會做的是在綁定的行上放置一個螢火蟲的斷點。當我運行這個頁面並且我的斷點被觸及時，我檢查元素視圖並查看DOM是否存在。如果沒有，那麼沒有什麼會受到限制 – abritez

的問題是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

來源

2014-01-12 01:30:16

不知道爲什麼你downvoted。我在發佈之前嘗試過，並沒有奏效。（還是）感謝你的建議。 –

jQuery - Simple「on（'click'）」選擇器問題

回答

相關問題