jQuery – 简单“on（’click’）”选择器问题
我有一个PHP脚本，在div中生成以下HTML（id =“schedule_wrapper_all”）。
生成的代码：
Wednesday 01/08 William Davis
230 N State Rd
Davison
11:00:00
Phone 1:
Phone 2:
Mary Smith
123 Main St
Davison
13:00:00
Phone 1: 8104124200
Phone 2: 8109311416
Friday 01/10 Nancy Poole
111 Main St
Ortonville
13:30:00
Phone 1: 8101111111
Phone 2: 8109999999
有多个“约会”，每个“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”）。 我似乎无法获得正确的选择器。 我标记了我遇到问题的区域。 现在，一个简单的“警报”就足够了。
在此先感谢您的帮助。
也许父节点还不存在。 如果是这样的话，这应该有效：
$(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 });
希望这可以帮助。 干杯
问题是appointments元素也是动态加载的，所以你需要将click处理程序绑定到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
试试这个
$(".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元素可能仍然不存在。