Jquery click event on a list works differently in Firefox and other browsers

Question

I am currently working on a dynamic cart. The process is like this : There is a list of elements with the same class, called "cartElement". When the user clicks one element with this class, the script gets its ID or parent's ID if it doesn't have one (this is due to different element types) then sends it to another function.

Here is the script :

$('.cartElement').click(function () {
    var id;
    if (event.target.id == '') 
        id = event.target.parentNode.id;
    else 
        id = event.target.id;
    cartRequest(id);
});

Here is one html element :

<div class="sub-addToCart float-lt">
    <button class="addToCart cartElement" id="webreseaux">
       <p class="float-lt">Je veux !</p>
       <i class="icon-cart float-rt"></i>
    </button>
</div>

This works perfectly in every browser except for Firefox which outputs nothing, not even an error. I tried to add console.log at different points to see where it breaks. I get a console.log() output before the if() statement, but not after it. Any idea ?

Answer 1

Firefox doesn't use global event model, you have to pass it explecitely to event callback handler:

$('.cartElement').click(function(event){ //<<< pass 'event' here
    /* .... */
});