The jquery click event in the list works differently in Firefox and other browsers

Question

I am currently working on a dynamic trolley. The process is as follows: there is a list of elements with the same class called "cartElement". When the user clicks on one element of this class, the script receives its identifier or parent identifier if it does not have one (this is due to different types of elements), 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 great in every browser except Firefox, which displays nothing, not even an error. I tried adding console.log at different points to see where it breaks. I get console.log () output before if () statement, but not after it. Any idea?

Answer 1

Firefox does not use a global event model; you must pass it explecitely to the event callback handler:

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