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元素时，click事件不会被执行！任何人都可以解释我怎么能让事件触发。这是我绑定click事件的方法。

$('.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的实际父项，那么您的方法应该有效：

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

父点击事件未按预期运行

1 个答案: