jquery的append动态添加元素后为什么会全局刷新页面

Question

 需求是自定义的属性需要显示在页面上，
//自定义属性
    $("#addAttr").click(function(){
        //获取自定属性的属性名称类型和要素类别
        var attrPage= $("#attrPage").val();
        var attrName= $("#attrName").val();
        var attrCate= $("#attrCate").val();
        //保存在数据库中

        //在前台展示       
        alert("attrPage:"+attrPage+" attrName:"+attrName+" attrCate:"+attrCate);
        var html="<input name='"+attrName+"' type='checkbox'>"+attrName+"</input>";

        if(attrPage == 1){
            $("#baseInfo").append(html);
        }else if(attrPage == 2){
            $("#marketInfo").append(html);
        }else if(attrPage == 3){
            $("#accessoryInfo").append(html);
        }else if(attrPage == 4){
            $("#brokerage").append(html);
        }

    });

    <div id="instranceInfoTemplate" class="span12" style="display:none;">
                <form id="instranceInfoAttr" role="form">
                  <div id="baseInfo" class="form-group">
                    <label for="name">产品基本信息</label>
                        <input id="productFeature" name="productFeature" type="checkbox" /> 产品特点 &nbsp;&nbsp; 
                        <input id="premium" name="premium" type="checkbox" /> 参考保费&nbsp;&nbsp; 
                        <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 产品介绍 &nbsp;&nbsp; 
                        <input id="sort" name="sort" type="checkbox" /> 产品排序 &nbsp;&nbsp; 
                  </div>
                  <div id="marketInfo" class="form-group">
                    <label for="name">产品营销信息</label>
                        <input id="productFeature" name="productFeature" type="checkbox" /> 产品小图 &nbsp;&nbsp; 
                        <input id="premium" name="premium" type="checkbox" /> 产品大图&nbsp;&nbsp; 
                        <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 产品营销文案 &nbsp;&nbsp; 
                        <input id="sort" name="sort" type="checkbox" /> 风险提示信息 &nbsp;&nbsp; 
                  </div>
                  <div id="accessoryInfo" class="form-group">
                    <label for="name">产品附件信息</label>
                        <input id="productFeature" name="productFeature" type="checkbox" /> 添加产品附件 &nbsp;&nbsp; 
                  </div>
                  <div id="brokerage" class="form-group">
                    <label for="name">产品佣金信息</label>
                        <input id="productFeature" name="productFeature" type="checkbox" /> 产品折标率 &nbsp;&nbsp; 
                        <input id="premium" name="premium" type="checkbox" /> 内部咨询师顾问佣金分成比例 &nbsp;&nbsp; 
                        <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 外部咨询师佣金分成比例 &nbsp;&nbsp; 
                  </div>
                  <input type='button' class='btn btn-large btn-primary' data-toggle='modal' data-target='#myModal'>自定义添加属性</button>
                  <button type="submit" class="btn btn-default">提交</button>
                </form>
            </div>

Answer 1

http://www.jb51.net/article/70342.htm