ajax请求数据动态填充之文档与字符串区别手法

success: function(data){
                    if(data.status==200){
                        var realName=data.doc.realName;
                        $("#yishiul").append('<li onclick="quxiaoyish(this,'+2+')"><a href="javascript:void(0);" class=""><label id="docresult" value="'+userId+'">'+ToHtmlString(realName)+'</label><i class="fa fa-times"></i></a></li>');

                    }
                }

function quxiaoyish(_element,id){
var _parentElement = _element.parentNode;
if(_parentElement&&_parentElement.children.length== 1){
$('.objectRelateCon'+id).css('display','none');
}
_parentElement.removeChild(_element);
}

 
saveOrgCode = [];
                success: function(data){
                    if(data.status==200){
                        var realName=data.doc.realName;
                        saveOrgCode.push('<li onclick="quxiaozhuren()"><a href="javascript:void(0);" class="">')
                        saveOrgCode.push('<label id="docLeader" value="')
                        saveOrgCode.push(userId+'">'+ToHtmlString(realName)+'</label><i class="fa fa-times"></i></a></li>');                          
                        $("#zhurenul").html(saveOrgCode.join(""));
                        //$("#docID").val(userId);                    }
                    }
                }

//选择第一诊断的ICD编码 - 已选择 - 点击×
function quxiaozhuren(){
$('.objectRelateCon').css('display','none');
$("#zhurenul").html("");
}

 

两种都是由ajax成功返回数据并动态填充到ul标签,并想要绑定到每一个li元素点击删除自己的事件,但是,第二种点击li标签删除的是所有的li标签,而第一种删除的只是所点击的li标签,有人可能会说代码就是这样写的,所以会是这种效果,但是根本原因是因为$("#zhurenul").html(saveOrgCode.join(""));这句,每次请求之后都会清空ul标签,重新填充数据,而这个数据用的方法saveOrgCode.join("")含义是把数组里面的数据连接成一个字符串,这样,你就无法将li标签与其他li标签按照dom区分删除,所以,点击删除只能清空ul,而第一种方法也不是完美的,因为每次添加可能会有重复数据,需要后续区分.(进步中,勿喷)

posted @ 2017-12-21 10:29  西晒甲山  阅读(222)  评论(0编辑  收藏  举报