CODEWITHSUNDEEP
javascriptjquery
fancy
fancy

Reputation: 51373

How can I trouble shoot click events being triggered twice?

I can't figure out where to start looking.

This is the JS:

$('.classy').on('click', 'button', function(){
    console.log('clicked');
})

I need some help figuring out how to trouble shoot this. I know I haven't given enough information to receive a real answer. The confusing part to me is that this only happens on touch devices. If I was accidentally binding two events or creating two instance of the same view it wouldn't it happen for mouse clicks too?

Thank you.

EDIT: I tried using the tap event via jQuery Mobile. This had a strange reaction. It would fire the event once and looked like it was done, but the next time you touch anywhere on the screen it would fire the event again. ...weird, any ideas?

I finally found the problem. It was coming from layered iScrolls. I had to hack the lib at this point, probably a much better way to fix this but illustrates the point.

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && window.iScrollClickFIX != true) {                        
    window.iScrollClickFIX = true;
    setTimeout(function(){
        window.iScrollClickFIX = false;
    }, 1)

Thanks for the help everyone.

Upvotes: 3

Views: 3303

Answers (5)

Amareswar
Amareswar

Reputation: 2064

You can use jquery's one function instead of click to get rid of double click issues.

Upvotes: 0

bcm
bcm

Reputation: 5500

First thing I'd do to trouble shoot is set a break point using debugger in Chrome/IE/Firefox to make sure the binding does not happen twice.

Or try this:

$('.classy').off('click').on('click', 'button', function(){
    console.log('clicked');
})

Upvotes: 0

Pavan
Pavan

Reputation: 4329

This may not be the actual solution...Just giving a thought

$('.classy').die('click').on('click', 'button', function(){ 
    console.log('clicked'); 
})

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Perhaps there is another parent element which you have also assigned a click handler. Try this, to prevent the click (or any other event) bubbling up the DOM:

$('.classy').on('click', 'button', function(e){
    console.log('clicked');
    e.stopPropagation();
})

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29498

Try changing your binding to mousedown instead of click?

(assuming you're using click)

Upvotes: 0

Related Questions