CODEWITHSUNDEEP
jqueryjquery-events
VVV
VVV

Reputation: 7593

jQuery multiple click event

I'm forced to use a script loaded from an external server.

This script basically adds an element <div class="myClass"> and bind a click method to it.

The thing is, in the click function associated to the element, they have a return false statement at the end.

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

My problem is that their event is triggered before and the return false in their function doesn't trigger my own click method.

I've tried loading my script before theirs but that didn't fix the problem. I've read about unbinding and then rebinding but I'm not sure it's a good option since their code can change at any moment.

Anything else I could try?

Upvotes: 5

Views: 24656

Answers (5)

andrea.rinaldi
andrea.rinaldi

Reputation: 1187

You need to make your handler function return false.. it prevents the event from bubbling.

In your tag html you have 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;
});

Upvotes: 5

Habibillah
Habibillah

Reputation: 28695

Try this one:

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

Upvotes: 1

Solomon Closson
Solomon Closson

Reputation: 6217

I had the same issue just recently. How I fixed it is, I added another class onto that element:

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

and than binded click events to that class like so:

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

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

Upvotes: 1

Barmar
Barmar

Reputation: 780984

The problem is that event delegation depends on the event bubbling up to the element that you bind the handler to. When their handler returns false, that prevents bubbling.

You'll have to bind the handler directly to the elements after they're added:

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

Upvotes: 2

Scary Wombat
Scary Wombat

Reputation: 44834

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

$(".myClass").addClass("myClass2");

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

Upvotes: 0

Related Questions