JavaScript/jQuery on click, confirm fires twice

Question

Problem solved itself...

FYI: Apparently that was Mac OS or Chromium engine bug as after last system and browser updates problem disappeared as suddenly as it appeared before. It looks like there it is not relevant to jQuery or JavaScript API.

I'll keep this question for few days and I'll delete it later as it doesn't fit StackOverflow rules in such situation.

Original post:

I have simple JS confirm inside the on click listener, exactly like in code below, no more requests (i.e. AJAX, no duplicated JS includes etc...).

The problem is that confirm dialog is fired twice in some browsers (i.e. Chrome and Opera at Mac OS) and my question is, did I miss something obvious or is that considerable bug of the mentioned browsers? Is there any workaround which will help me to prevent this? Also tried with e.preventDefault(); also with no luck.

Edit I should've also mention that if there's no confirm('...'); within the on click it's fired only once (so only one Let us check... in the console occurs). With confirm both logs appears twice in the console, but boolean is in opposite order of clicking - for an sample - if I'll click Cancel first and OK later console logs true first and false at the end... quite weird :S

Versions:

jQuery version: 1.11.3 - 1.12.0
Chrome: 47.0.x (newest)
Opera: 34.0.* (newest)

Sample code (complete):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test...</title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>

    <div class="myBtn" data-field="one">Take one</div>
    <div class="myBtn" data-field="two">Take two</div>
    <div class="myBtn" data-field="three">Take three</div>
    <div class="myBtn" data-field="four">Take four</div>

    <script>
        $(document).ready(function () {
            $(document).on('click', '.myBtn', function () {
                console.log('Let us check...');
                var confirmation = confirm('Are you sure you want ' + $(this).data('field') + '?');
                console.log(confirmation);
            });
        });
    </script>

</body>
</html>

Or just click here: https://jsfiddle.net/gu58wwtg/1/

Last edit: just checked other possibilities like bare approach (with pure JS, no jQuery) and also prompt('...'); (which also opens twice in reversed order) instead of confirm('...'); and problem still occurs, so I suspect a bug, sorry, for bothering you, and thanks for your attention. I'll keep the question, so other guys can save some time on frustrations ;)

If elements are not generated dynamically the you don't have to delegate the event. — Jai
– Jai, Commented Jan 28, 2016 at 12:24
@Jai, there is no harm in using delegation, Not able to reproduce the problem on Chrome Version 48.0.2564 — Satpal
– Satpal, Commented Jan 28, 2016 at 12:25
@Satpal just mentioned that there is no need if elements are static. — Jai
– Jai, Commented Jan 28, 2016 at 12:26
not able to reproduce, but you can try one api, api.jquery.com/one — A.T.
– A.T., Commented Jan 28, 2016 at 12:29
@biesior Ya there was old bug regarding old webkit engine and focus event being fired twice when using any modal in handler. I suspect this is the same kind of bug. You should report it to chromium team. Maybe this is related to there lastest update using WKWebView. And for testing purpose, i'd try using mouseup event instead and maybe not delegating event, and maybe checking event.target, and maybe etc... — A. Wolff
– A. Wolff, Commented Jan 28, 2016 at 12:54

Amar Singh · Accepted Answer · 2016-01-28 12:30:06Z

0

I think you should use .one

$(document).one('click', '.myBtn', function () {

Description: .one() Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

answered Jan 28, 2016 at 12:30

Amar Singh

5,6223 gold badges30 silver badges56 bronze badges

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

2 Comments

biesior Over a year ago

Unfortunately doesn't solve the problem, if user clicks Cancel he can't click anymore :/

Žygimantas Over a year ago

Just a disclaimer, if you use $().one, it will fire once and after it will not be responsive anymore.

Herman Nz · Accepted Answer · 2016-01-28 13:01:48Z

0

Try to clear your cache in chrome setting as well as history of the file And then close your browser. Then try again.

I use this code similar like you and it works!

<script>
    //$(document).ready(function () {
        $(document).on('click', '.myBtn', function () {
            console.log('Let us check...');
            var confirmation = confirm('Are you sure you want ' + $(this).data('field') + '?');
            console.log(confirmation);
        });
   // });
</script>

It fires one! That's chrome. I'm not sure it is a bug. It's perhaps the way chrome store it. But I haven't try in Opera at Mac (since, I have no mac with me)

edited Jan 28, 2016 at 13:01

answered Jan 28, 2016 at 12:56

Herman Nz

2,2613 gold badges23 silver badges38 bronze badges

3 Comments

biesior Over a year ago

Thx @Herman, I edited my post, (last edit) and I've no doubt about bug anymore... Clearing cache, using non-jQuery approach and other typical things doesn't change anything. Even prompt() is called twice

Herman Nz Over a year ago

anything wrong with the mouse? have you tried to close the browser :D sorry. just to guess. I'm trying to interpret this link and try to answer your question. stackoverflow.com/questions/1195440/…

biesior Over a year ago

I checked that possibility as well, mouse is OK ;)

Collectives™ on Stack Overflow

JavaScript/jQuery on click, confirm fires twice

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related