我有以下 HTML:
<div class="eventContainer" id="dennaVecka" style="background-color: #2B4699;">
<p>Denna vecka</p>
</div><!--eventContainer ends-->
<div class="eventList" id="dennaVecka_table">
...
</div>
以及以下 jQuery:
eventID = null;
$('.eventContainer p, .eventContainer').click(function (e) {
//eventID = $(this).attr('id');
eventID = e.target.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
//alert(e.target.id);
});
我想要:当div class eventContainer或单击其中的段落时,我想使用eventContainer的ID(id =“dennaVecka”)来显示其下方的div class eventList。我当前设置的问题是,如果单击该段落,我不知道如何获取 eventContainer 的 ID。如果我单击该段落,我将获得该段落的 ID(“未定义”)。
有没有办法在jQuery中无论点击div还是段落都获取eventContainer的ID?
也许我应该以其他方式设置 HTML?
最佳答案
利用单击事件向上冒泡到父容器的事实。在这种情况下,您只能将一个事件处理程序绑定(bind)到 .eventContainer
并读取 this.id
来获取容器 ID:
$('.eventContainer').click(function (e) {
eventID = this.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
});
因此,如果您单击 .eventContainer
内的 p
元素,事件仍将由 .eventContainer
上的上述监听器处理,并使用 this
指向它。
关于javascript - jQuery 点击事件处理类元素和内部元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28729092/