How to prevent Bootbox from displaying twice after a double click?

Question

I have a <ul> element that opens a bootbox when it's clicked. Double clicking this element triggers the onclick in JQuery twice

$("#email-list").on("click", ".list-group-item", function (e) {
bootbox.confirm("Send a forgotten password email to " + email + "?", function (result) {...}}

I tried using 'e.preventDefault()'

$(document).ready(function () {

    $("#email-list").dblclick(function (e) {

        e.preventDefault();
    });

});

I even tried disabling clicking on the element but both failed. The bootbox still appears twice.

$("#email-list").bind('click', function () { return false; });
//...do stuff
$("#email-list").unbind('click');

Anyone has a suggestion?

can you give `#email-list`, or the bootbox a new class like `.open` when you click? then check if that element has the class open, if not, do what it needs to do — ntgCleaner, Sep 16 '15 at 20:18
Show how you retrieve bootbox and what you have try to prevent it to appear twice. — Lesha Ogonkov, Sep 16 '15 at 20:18
you want it to work with singe click as well as with double click? — dfsq, Sep 16 '15 at 20:20
If you want to bind an handler only to a double click event, use `.on( "dblclick", selector, handler )` or its shortcut `.dblclick(...)` However, I'm not sure if I understood you correctly. — limond, Sep 16 '15 at 20:26

Varda Elentári · Accepted Answer · 2018-01-23T14:53:02.953

8

Another solution can be to add:

bootbox.hideAll();

to hide any other bootboxes right before showing the bootbox like so:

bootbox.hideAll();
bootbox.confirm("Some Message " , function (result){/*do stuff*/}

edited Jan 23 '18 at 14:53

answered Feb 08 '16 at 17:34

Varda Elentári

2,242
6
35
55

score 1 · Answer 2 · answered Sep 16 '15 at 20:32

1

Try this:

$("#email-list").on("click", ".list-group-item", function (e) {
   if(!$('#myModal').is(':visible')){
       $('#myModal').modal('show');  
   }
   e.preventDefault();
}

answered Sep 16 '15 at 20:32

Jasper Giscombe

313
1
5

I did, `$('#myModal').is(':visible')` is always false, hence it's always displaying the bootbox – Varda Elentári Sep 17 '15 at 00:59

score 0 · Answer 3 · answered Sep 16 '15 at 20:41

0

Use the click event, then you can replace

e.preventDefault();

with

e.stopPropagation();

or

return false;

answered Sep 16 '15 at 20:41

simdrouin

1,008
11
21

score 0 · Answer 4 · answered Sep 17 '15 at 15:14

I figured the best way to do this is to separate the two events; onclick and dbclick, I used something like this, I hope it will save someone some time:

var DELAY = 700, clicks = 0, timer = null;

    $(function () {

        $("#email-list").on("click", ".list-group-item", function (e) {

            clicks++;  //count clicks

            if (clicks == 1) {
                   //do stuff
                    clicks = 0;  //after action performed, reset counter

                }, DELAY);
            } else {

                clearTimeout(timer);    //prevent single-click action
                clicks = 0;             //after action performed, reset counter
                return false;
            }

        })
        .on("dblclick", function (e) {
            e.preventDefault();  //cancel system double-click event
        });
   }

How to prevent Bootbox from displaying twice after a double click?

4 Answers4