JQuery设置某元素显示与隐藏不起作用之一闪而过

说起来，都是对html css理解不够深入的锅。

原来的标签是这样写的

<p  class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="" id="add_friend">添加到球友列表</a>
</p>

这个原来是隐藏的，希望点击之后，浮出，一段时间后，消去

<div id="successtoast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p id="successtoastContent" class="weui-toast__content"></p>
</div>
</div>

JS代码：

// 点击 添加到球友列表 触发
$(document).on("click","#add_friend",function(){
//向后台发送 ajax 请求
var to_id = $('#to_id').val();
$.ajax({
type: "GET",
url: "/organize/myorganizerequest?toId="+to_id,
success:function(data){
showCompleteToast("邀请成功，等待好友回复！");
},
error:function(data){
alert(data);
}
});
});

function showCompleteToast(content) {
$('#successtoastContent').html("");
$('#successtoastContent').html(content);
if ($('#successtoast').css('display') != 'none')
return;

$('#successtoast').fadeIn(100);
setTimeout(function() {
$('#successtoast').fadeOut(100);
}, 2000);
}

结果，闪了一下就木有了。不能到达想要的效果。

找了一番之后，，发现，竟是这里的原因，，

<a class="weui-btn weui-btn_primary" href="" id="add_friend">添加到球友列表</a>

坏就坏在这个a标签，它点击之后是要刷新页面的啊，当然会影响我们的处理。

把它改为button就可以啦。

一定要慎重使用各种标签，不要乱来，，