面临单击和双击 JQuery 的问题

问：

我正在使用单击ajax调用从文件中获取html以附加到div，然后单击以按类删除它。单击插入和删除工作正常，但是当错误地双击或双击时，html 会重复。也把它添加到jsfiddle上

这是我的jQuery代码。

$('.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');
    }
});