JQuery multi click event

Question

I am forced to use a script downloaded from an external server.

This script basically adds the <div class="myClass"> element and binds the click method to it.

The fact is that in the click function associated with the element, there is a return false at the end.

I also have my own script, and I'm trying to add the click method to the same element using $(document).on('click', '.myClass', function() { ... })

My problem is that their event fires earlier, and return false in its function does not fire my own click method.

I tried loading my script before using them, but that didn't solve the problem. I read about unleashing and then repeating, but I'm not sure if this is a good option, as their code can change at any time.

Anything else I could try?

Answer 1

The problem is that event delegation depends on which event bubbles up to the element to which you are attaching a handler. When their handler returns false, this prevents bubbles.

You will need to bind the handler directly to the elements after they are added:

 $(".myClass").click(function() { ... }); 

Answer 2

You need to return the handler function false. This prevents a bubble event.

In your html tag you need to write something like:

 <button type="button" class="btn" onclick="myHandler(); return false;"></button> 

Or if you use jQuery:

 $(".btn").on('click', function (event){ //do stuff.. return false; }); 

Answer 3

in your onLoad, why don't you add a new class to myClass div and then set up an event listener for the new class.

 $(".myClass").addClass("myClass2"); $(".myClass2").on('click', function() { ... }) 

Answer 4

I had the same problem recently. As I fixed this, I added another class to this element:

 $(document).load(function() { $(".myClass").addClass("myNewClass"); }); 

and then bind the click events to this class as follows:

 $(document).on("click", ".myNewClass", function () { ... }); 

This worked for me as it overwritten the myClass class with the click event myNewClass .

Answer 5

Try the following:

 $(document).on('click', '.myClass', function(e) { e.preventDefault(); ... ... })