记录Js动态加载页⾯.append、html、appendChild、after、
repe。。。
今天再优化blog页⾯的时候添加了个关注按钮和图⽚，但是页⾯上这个按钮和图⽚时有时⽆，本来是搞后端的，被这个前端的⼩问题搞得抓⽿挠腮的！
⽹上各种查询解决⽅案，把我解决问题的艰⾟历程分享出来，希望⼤家遇到这些问题能少⾛弯路！
先来看看⽹上各位⼤佬的解决⽅案：
⽅案⼀：事件代理
思路：因为最开始他们共同的⽗级content是在HTML结构中的，所以将两个单击事件代理给content，通过单击获得的class名来判断点击的是哪⼀个对象，再进⾏具体操作
$('#content').on('click',function (e) {
var target=e.target||e.srcElement;//获取当前点击的对象
var cls=target.className;//获取当前点击对象的class名
if(cls==='addcart'){//如果点击的是加⼊购物车
console.log('addcart')
}else if (cls==='buy') {//如果点击的是⽴即购买
console.log('buy')
}
});
⽅案⼀分析：
append中的节点是在整个⽂档加载后才添加的，页⾯并不会为未来的元素初始化添加点击事件，所以使⽤这种⽅式动态添加的节点中的点击事件不会⽣效。
问题深⼊探究：
⽅案⼀中的事件代理是可以解决不会显⽰的问题，可事件代理有个前提是需要 click 点击事件来触发的，⽽我的页⾯是不需要单机事件的，我的页⾯⼀个是div.html()，覆盖原来的DIV，另⼀个是
js获取子元素$("#p_b_follow").append(gz); 代码如下：
<script>
$(document).on('green_channel', function() {
<!--添加打赏-->
var das= '<img src="imagesblogs/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">';
$("#green_channel").html(das);
});
$(document).on('p_b_follow', function() {
<!-- 添加关注 -->
var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" >+加关注</a>';
$("#p_b_follow").append(gz);
});
</script>
⽅案⼀并不适⽤！接下来我就到了
⽅案⼆：动态往div中添加元素：
创建⼦节点、⽗元素动态添加⼦元素：
//获取div
var div = ElementById("DvelopmentTarget");
//换⾏
var br = ateElement("br");
div.appendChild(br);
/
/添加label ，存放指标名称
var div2 = ateElement("label");
div2.innerText = data[n].QualitativeTargetName;
div.appendChild(div2);
//添加text ，存放指标权重
var input = ateElement("input");
input.setAttribute('type', 'text');
input.setAttribute('ReadOnly', 'True'); //设置⽂本为只读类型
input.value = data[n].DevelopmentAllWeight
div.appendChild(input);
//添加select 存放指标id
var targetID = ateElement("select");
targetID.innerText = data[n].QualitativeTargetID;
targetID.setAttribute('hidden', 'hidden');
div.appendChild(targetID);
//添加 %(单位百分⽐)
//换⾏
var br = ateElement("br");
div.appendChild(br);
⽅案⼆分析：
这种 appendChild()⽅法我也试了，仍然没有任何效果，还是按钮和图⽚时有时⽆！
突然想到以前做过Layui 的前端web页⾯，⾥⾯有⼀段：
$(document).ready(function()
{
//回写数据
$("#nameFour").val(other[1]);
$("#mobileFour").val(other[2]);
});
$(document).ready(function() 是加载页⾯的时候执⾏；
深⼊分析：
既然回写完数据有der(); 页⾯的重新渲染，就说明是页⾯加载后才会回写数据，不然也定位不到页⾯上的id 元素/节点；$(document).ready(function() 其实是页⾯加载过后才开始执⾏！
如果是这样，那我想着在页⾯上加载个div 重载？
然后⽹上了半天也没到可以⽤的 div 重载⽅法!
回过头⼀想：
这些⽅法 .append、html、appendChild、 其实都是在页⾯加载完成后才添加的，只有刷新才会更新到页⾯当中，所以就有了开头的按钮和图⽚时有时⽆的情况！
然后我就想到了JS的延迟加载，是否可以在页⾯加载后，在执⾏页⾯的重写和覆盖了？
终极解决⽅案如下：
<script>
$(document).on('green_channel', function() {
<!--添加打赏-->
var das= '<img src="imagesblogs/cnblogs_com/aitree/1916628/o_210115052741%E6%89%93%E8%B5%8F.png">';
// $("#green_channel").html(das);
setTimeout(function(){ $("#green_channel").html(das); }, 300);
});
$(document).on('p_b_follow', function() {
<!-- 添加关注 -->
var gz = '<a onclick=onclick="follow(\'451c91ea-4f17-4353-c7f3-08d8ae5fa907\')" href="javascript:void(0)" >+加关注</a>';
// $("#p_b_follow").append(gz);
setTimeout(function(){ $("#p_b_follow").append(gz); }, 200);
});
</script>
setTimeout(function(){func()，time}⽅法延迟执⾏覆盖和写⼊，完美的解决了Js动态加载页⾯.append、html、appendChild、repend等添加元素节点不⽣效的问题,
⽽且也不需要 “单击事件” 和 “页⾯重新渲染”!
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论