jQuery单击事件处理内部的类元素和元素

时间:2015-02-25 20:38:05

标签: javascript jquery html

我有以下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类eventContainer 里面的段落被点击时,我想使用eventContainer(id =“dennaVecka”)的ID来显示它下面的div类eventList。我当前设置的问题是,如果单击该段落,我不知道如何获取eventContainer的ID。如果我单击该段落,我将获得段落的ID(“未定义”)。

有没有办法在jQuery中获取eventContainer的ID,无论我点击div还是段落?

也许我应该以另一种方式设置HTML?

1 个答案:

答案 0 :(得分:2)

使用click事件冒泡到父容器的事实。在这种情况下,您只能将一个事件处理程序绑定到.eventContainer并读取this.id以获取容器ID:

$('.eventContainer').click(function (e) {
    eventID = this.id;
    $('.eventList#' + eventID + '_table').fadeIn(300);
});

因此,如果您点击p内的.eventContainer元素,.eventContainer上的上述侦听器仍会处理该事件,this指向该事件。