javascript - 父点击事件未按预期运行

Question

我的页面设计中有以下 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 元素时，点击事件不会被执行！谁能解释我如何让事件触发。这是我绑定点击事件的方法。

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

Answer 1

在您的代码段中没有看到 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-list').on('click', '.bill-item', function(e) {
    var posX = e.pageX;
    var posY = e.pageY;
    showToolTip(posX, posY, this);
});