jQuery multiple click event

Question

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?

well one way is pass event as argument and use event.preventDefault() for your script. — Dipesh Parmar
– Dipesh Parmar, Commented Sep 6, 2013 at 3:57
@DipeshParmar I'm not sure I understand. Where would I pass this event? — VVV
– VVV, Commented Sep 6, 2013 at 4:00
could you try event namespace $(document).on('click.namespace', '.myClass', function() { ... })? — Khanh TO
– Khanh TO, Commented Sep 6, 2013 at 4:06

andrea.rinaldi · Accepted Answer · 2013-09-06 10:03:36Z

5

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;
});

answered Sep 6, 2013 at 10:03

andrea.rinaldi

1,1871 gold badge13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VVV Over a year ago

Although this is true, this was not what I asked but thanks anyway.

Barmar · Accepted Answer · 2013-09-06 04:00:59Z

2

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() { ... });

answered Sep 6, 2013 at 4:00

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

VVV Over a year ago

This works! Thank you. I was trying to write less code with the .on method but it seems I can't. Thank you!

Solomon Closson · Accepted Answer · 2013-09-06 04:02:00Z

1

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.

answered Sep 6, 2013 at 4:02

Solomon Closson

6,25715 gold badges82 silver badges121 bronze badges

Comments

Habibillah · Accepted Answer · 2013-09-06 04:02:25Z

1

Try this one:

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

answered Sep 6, 2013 at 4:02

Habibillah

28.8k5 gold badges40 silver badges59 bronze badges

Comments

Scary Wombat · Accepted Answer · 2013-09-06 03:58:17Z

0

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() { ... })

answered Sep 6, 2013 at 3:58

Scary Wombat

44.9k6 gold badges38 silver badges67 bronze badges

Collectives™ on Stack Overflow

jQuery multiple click event

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related