jquery click里的for循环，点击两次数据才会出现在页面上

Question

点击一次的效果

点击两次的效果

$('#printAll').on('click', function(e){
        let printData=data1
        var div = $("#printAllList");
        for(var i=0;i<printData.length;i++){
            console.log(123,printData[i])
            var printSingel="<div id='printPageAll'>"
            +"<div id='printPage' class='print"+i+"'>"
            +"<div id='bcTarget' class='targetList"+i+"'></div>"
            +"</div>"
            +"</div>"
            $(".targetList" + i).text(printData[i].sku);
            e.preventDefault();
            div.append(printSingel)
        }
        
    });

第一遍console.log就能打印出来数据，但是页面没能展示

Answer 1

$(".targetList" + i) 这玩意点第一遍的时候不存在啊，点第二遍的时候可以是因为第一遍添加上了

Answer 2

你这串代码的问题有点多哦
1.for循环添加多个元素，虽然在当前情况这个i可以不要，不过可能后续还有功能，建议var换成let
2.var printSingel放在了循环体里面，意味着每次都是新的变量，建议放循环体外部
3.每次循环都append，意味着资源消耗极大，建议循环体里面只做元素的拼接，循环结束后一次性append
4.$(".targetList" + i).text(printData[i].sku);也没有必要在循环体内找到元素又去修改text，直接把printData[i].sku拼接在对应字符串节点上就行了，一是为了效率，二是没有append的情况下根本找不到指定元素
5.click事件是可以多次执行的，建议添加节流
6.循环体内添加e.preventDefault()只会影响性能

Answer 3

$('#printAll').on('click', function(e){
        let printData=data1
        $("#printAllList").append(printData.map(function(item, i){
            return "<div id='printPageAll'>"
            +"<div id='printPage' class='print"+i+"'>"
            +"<div id='bcTarget' class='targetList"+i+"'>" + item.sku +"</div>"
            +"</div>"
            +"</div>";
       }).join(''));
       e.preventDefault();
    });