父单击事件未按预期运行

Parent click event not running as expected

本文关键字：运行 单击 事件      更新时间：2023-09-26

在我的页面设计中有以下div层次结构。我在bill-item元素上绑定了一个click事件，该元素有多个覆盖bill-item元素的子元素。

<div class="bill-item">
    <!-- Item image -->
    <div class="bill-item-img"></div>
    <!-- Item description -->
    <div class="bill-item-description">
        <div class="bill-item-name">
            <!-- Item Name -->
            <p class="bill-item-name-left">Normal Cofee</p>
            <!-- Item Price -->
            <p class="bill-item-name-right">170.00</p>
            <div class="clear"></div>
        </div>
        <!-- Total item price -->
        <div class="bill-item-price">   <span>170.00</span>
        </div>
        <!-- Item Quantity -->
        <div class="bill-item-amount">  <span>1</span>
        </div>
    </div>
    <!-- Increas & Decrease item Quantity -->
    <div class="bill-amount-selection"> <a class="amount-increase" href="#"></a>
    <a class="amount-decrease" href="#"></a>
    </div>
    <div class="kot-bot">   <span>-- KOT / BOT --</span>
    </div>
</div>

但是当我点击bill-item元素时，点击事件没有被执行!有人能告诉我怎么才能触发事件吗。这是我绑定click事件的方法。

$('.bill-item-list').on('click', '.bill-item', function(e) {
        var posX = e.pageX;
        var posY = e.pageY;
        showToolTip(posX,posY,this);
    })

在代码片段中没有看到bill-item-list元素。试试以下命令:

$('.bill-item').click(function(e) {
    var posX = e.pageX;
    var posY = e.pageY;
    showToolTip(posX, posY, this);
});

如果bill-item-list是所有bill-item的实际父项，那么你的方法应该有效:

$('.bill-item-list').on('click', '.bill-item', function(e) {
    var posX = e.pageX;
    var posY = e.pageY;
    showToolTip(posX, posY, this);
});
相关文章：