jquery - jQuery click on li item but NOT a class in it

Question

I have this cart that has many items, everyone of this is a <li> element set thru PHP:

<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>

I use this jQuery to select an item:

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

I want to remove the click event from the li > div.product-findout.
I tried changing the evet this way but doesn't work:

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

[Edit] The code classes and sub-classes are important to be kept the same, as the jQuery gets and sets attribute to it. I need to make the li item clickable AND GIVE THE .product-findout another link/event.
Any other way or idea?

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

您将单击事件附加到项目父项，因此由于每次单击任何子项时都会传播事件，该事件将传播到父项：

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

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

小提琴

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>