Facing issue with on click and double click JQuery

Question

I am using on click ajax call for take html from a file to append To a div and then on click to remove it by class. The single click is working fine inserting and removing but when by mistake double clicking or on double clicking the html is coming duplicate. Also add it on jsfiddle

here is my jQuery code.

$('.srcbx').on('click',function(){
    if($('.srcbx').hasClass('opened')){
        $("form.search").slideUp(1500,function(){$(this).remove();});
        $(".srcbx").removeClass("opened");
    }
    else
    {
        $.ajax({
            type:"GET",
            url:"<?php echo BASE_URL; ?>/load.php",
            data:{action:'search-html'},
            success:function(data){
                $(data).appendTo("header .container").slideDown(1500,function(){$(this).show();});
                $("#search").keyup(function(){
                if($(this).val() != '' && $(this).val().length >= 3){
                    $.ajax({
                        type:"POST",
                        url:"<?php echo BASE_URL; ?>/load.php",
                        data:{action:'search',keyword:$(this).val()},
                        beforeSend:function(){
                            $("form.search").prepend("<div class='loader'></div>");
                        },
                        success: function(data){
                            $("#suggesstion").show();
                            $("#suggesstion").html(data);
                            $("form.search .loader").remove();
                        }
                    });
                }
                else
                {
                    $("#suggesstion").hide();
                }
                });
                $("#search-btn").click(function(){
                    var v = $("#search").val(); 
                    window.location.href="<?php echo BASE_URL; ?>/?s="+v;
                    return false;
                });
            }
        });
        $('.srcbx').addClass('opened');
    }
});

There's probably a fancy way, but you could use .one() instead of .on so that it only happens once, or you could disable the button until ajax has completed, or just have a flag eg if(running===true) return; running=true; which you clear in $.ajax().always() — fdomn-m
– fdomn-m, Commented Jan 21, 2021 at 9:02
Thank you for your help. I am using the click for adding and removing so the ``` .one() ``` is not for this right? how can i disable or add a flag? you can add here? jsfiddle.net/amiralamkhan/b9omyx1g/10 — Amir
– Amir, Commented Jan 21, 2021 at 9:09
If you want to use .one() (it's not very good UX in this case without additional styling, but fixes your problem) and be able to click it again then you need to add it back using another .one() in the .always() — fdomn-m
– fdomn-m, Commented Jan 21, 2021 at 9:10
I don't like the .one() can you show me the code for disable the button or add flag? on my jsfiddle? — Amir
– Amir, Commented Jan 21, 2021 at 9:13
Had a closer look at your code and you're essentially already adding a flag with $('.srcbx').addClass('opened');. So I'm not exactly sure where in your code your problem is. I already (perhaps incorrectly) made some assumptions such as assuming "double click" meant "click twice" (which is subtly different) - but do you mean multiple keyups in #search? It's great you've included some code, but perhaps you could reduce your code to only the relevant parts and remove anything that's not relevant. — fdomn-m
– fdomn-m, Commented Jan 21, 2021 at 9:14

Amir · Accepted Answer · 2021-01-21 12:03:57Z

1

Fixed.. I just add multi flags like this and it is working fine and ignoring double clicks.

if(!$('.srcbx').hasClass('opened') && !$('form').hasClass('search')){}

answered Jan 21, 2021 at 12:03

Amir

336 bronze badges

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

Collectives™ on Stack Overflow

Facing issue with on click and double click JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related