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就可以啦。

---

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