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, Jan 28 '16 at 12:24
@Jai, there is no harm in using delegation, Not able to reproduce the problem on Chrome Version 48.0.2564 — Satpal, Jan 28 '16 at 12:25
@Satpal just mentioned that there is no need if elements are static. — Jai, Jan 28 '16 at 12:26
not able to reproduce, but you can try one api, http://api.jquery.com/one/ — A.T., Jan 28 '16 at 12:29
This can happen if you are bind event handler twice, Are you sure you are only binding event once? — Satpal, Jan 28 '16 at 12:31
'$(document).ready(function () {' = onload event ... this one is no need as far as you just need click event — Joe Kdw, Jan 28 '16 at 12:31
But do you have still same issue on your posted jsFiddle??? It just looks like you didn't provided all relevant code/HTML markup — A. Wolff, Jan 28 '16 at 12:33
@Satpal, the code I showed (in post and on JSfiddle) is EXACT code I'm testing, no any single additional char — biesior, Jan 28 '16 at 12:35
If you comment `var confirmation = ...` line, is it still fired twice? And can you just confirm that you have same issue on your jsFiddle? EDIT: i see you have issue on Mac OS, so i couldn't help you more — A. Wolff, Jan 28 '16 at 12:37
@A.Wolff sorry, I should mention that before - check my edit, if there's no confirm, everything's all right. Also colleague of mine checked the behavior at Windows version of Chrome, and the problem doesn't exist there, so I suspect some bug :/ doh — biesior, Jan 28 '16 at 12:47
@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, Jan 28 '16 at 12:54
The problem solved itself with latest system/browser updates, that clearly means that __was__ a bug.... — biesior, Jan 29 '16 at 10:47
(OP request) I'm voting for DELETING this question because finally problem was caused by third party software bug (in Mac OS and/or Chrome). If it will stay here it will lead to misunderstanding for guys who have similar problems. Suggested answers are programming oriented, anyway none of them could solve this problem. — biesior, Jan 29 '16 at 12:07

score 0 · Answer 1 · answered Jan 28 '16 at 12:30

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 '16 at 12:30

Amar Singh

5,464
2
26
55

Unfortunately doesn't solve the problem, if user clicks `Cancel` he can't click anymore :/ – biesior Jan 28 '16 at 12:33
Just a disclaimer, if you use $().one, it will fire once and after it will not be responsive anymore. – Žygimantas Apr 29 '22 at 12:58

Joe Kdw · Answer 2 · 2016-01-28T13:01:48.693

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 '16 at 13:01

answered Jan 28 '16 at 12:56

Joe Kdw

2,245
1
21
38

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 – biesior Jan 28 '16 at 13:09
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. http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates – Joe Kdw Jan 28 '16 at 13:14
2

I checked that possibility as well, mouse is OK ;) – biesior Jan 28 '16 at 13:19

JavaScript/jQuery on click, confirm fires twice

2 Answers2

Linked