Question

我有这个包含很多项目的购物车，每个人都是通过PHP设置的<li>元素：

<li class="cart-product" data-id="<?= $product->id ?>" data-rowid="" data-ison="0">
    <span class="product-lightup"><img src="<?= base_url('img/site_basics/product_lightup.png') ?>" /></span>
    <img src="<?= base_url('img/products/'.$product->image) ?>" class="product-img"/>

    <!-- PLUS/MINUS -->
    <div class="text-center product-click"><br>
        <span class="cart-plus"><img src="<?= base_url('img/site_basics/plus_sign.png') ?>" /><br>Aggiungi</span>
        <span class="cart-minus"><img src="<?= base_url('img/site_basics/minus_sign.png') ?>" /><br>Rimuovi</span>
    </div>

    <!-- Findout button -->
    <div class="text-center product-findout">
        <span class="badge">Scopri più</span>
    </div>
</li>

我使用这个jQuery来选择一个项目：

$('.cart-product').click(function(){
    if($(this).attr('data-ison') === '1'){
        $(this).itemOff();
    }else{
        $(this).itemOn();
    }
});

我想从li > div.product-findout中移除点击事件我尝试用这种方式改变evet但不起作用：

$('.cart-product:not(.product-findout)').click(function(){
    [...]
});

的 [编辑] 的代码类和子类非常重要，因为jQuery获取并设置了属性。我需要让li项可点击并发送.product-findout其他链接/事件。
其他任何方式或想法？

Answer 1

这样的事情应该有效

$('.cart-product').on('click', function (event) {
    if (!$(event.target).hasClass('product-findout')) {
        if ($(this).attr('data-ison') === '1') {
            $(this).itemOff();
        } else {
            $(this).itemOn();
        }
    }
});

这是一个小提琴的例子 http://jsfiddle.net/C4SJD/

Answer 2

您正在将click事件附加到item parent，因此每次单击任何子项时事件都会传播，事件将传播到父项：

$('.cart-product').click(function() {
    alert("click");
});

$(".product-findout").click(function () {
    return false;
});

Fiddle

Answer 3

请参阅JSFIddle

上的此示例

我已使用事件传播停止功能来实现此目的

$('.cart-product').click(function(){
        alert('hi');
    }).find('.product-findout').click(function(e) {
  //find the child and stop the event and bind another function
    e.stopPropagation();
    alert('hi 2');
});

修改

更新了我的回答

Answer 4

将其移到li：

之外

<div class="text-center product-findout">
    <span class="badge">Scopri più</span>
</div>

jQuery单击li项但不是其中的一个类

4 个答案: