我使用点击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');
}
});
修复…我只是像这样添加多个标志,它工作得很好,忽略了双击。
if(!$('.srcbx').hasClass('opened') && !$('form').hasClass('search')){}