javascript - 请问Jquery的选择器有时候无法获取JS动态生成的html,有时候又可以获取,问题可能出在哪里?

 0度的浪漫神探 发布于 2022-11-12 01:44

如图,点击右边某一行的编辑按钮,弹出一个窗口,其中的内容是根据同一行的表格中的识别规则进行还原的。主要涉及都包括了通过Ajax从后台获取的数据,以及JS根据数据生成表格来填入。

重点来了:
点击编辑,还原窗口的过程,我用到了
$("td[name='fieldname']").html(temp); //这里temp是数据

通过观察我们发现
这个$("td[name='fieldname']").html(temp);有时候可以成功填入,有时候却失败,没有办法填入
$("td[name='fieldname']")有时候无法获取窗口中的那个位置,请问主要的原因是什么?

如果描述不够详细,请指出,谢谢。
——————————————————————————————————————————————————————
不好意思,因为有事耽误了下,未能及时回复。谢谢toBeTheLight的建议。
补充一下
上面截图中的编辑规则窗口是隐藏在页面中的一部分html,使用了layer的弹窗插件将这部分代码显示在弹窗中,其中标签列表的部分是动态生成的。

//这是标签列表的初始html
 

这是根据后台的数据,填充表格的内容
 $.ajax({
                type: "post",
                url: basePath + "/rule/getenum",
                data: {"labelName": labelName},
                dataType: "json",
                success: function (data) {
                    var arr=new Array();
                    if (data.indexOf(",") != -1) {
                        arr = data.split(",");
                    } else if (data.indexOf(","!= -1)) {
                        arr = data.split(",");
                    }
                    var content = "";
                    var html = " 枚举  字段  计算  操作  输入 ";
                    var opt="";
                    var cal="";
                    var input="";
                    for (var i = 0; i < arr.length; i++) {
                        content = "" + arr[i] + "" + "" + "" + "" + "" + cal + ""+"" + opt + "" + "" + input + "";
                        html += content;
                    }
                    $("#enumListBody").html(html)
                },
                error: function () {
                  
                }
            });
//这个是根据后台解析的数据,进行页面的还原的部分
 $.ajax({
            type: "post",
            url: basePath + "/rule/getcalculate",
            data: {"field": fieldName},
            dataType: "json",
            success: function (data) {
                $("#field").find("option[value='"+fieldName+"']").attr("selected",true);
                console.log("-------------Begin----------------------");
                console.log("填充的字段对象为:",$("td[name='fieldname']"));
                console.log("填充的字段对象为:",$("td[name='calculate']"));
                console.log("填充的字段对象为:",$("td[name='operate']"));
                console.log($("#enumListBody").innerHTML);
                console.log("-------------------------------------");
                var temp=$("#field").val().split(":")[0];
                $("td[name='fieldname']").html(temp);

//                console.log("填充的字段对象为:",$("td[name='fieldname']"));
//                console.log("data=",data);

                var ans = JSON.parse(data);
                var cal = new Array();
                for (var key in ans[0]) {
                    cal.push(key);
                }

                var calhtml = "";
                $("td[name='calculate']").html(calhtml);

                var opthtml = "";
                $("td[name='operate']").html(opthtml);

                $("td[name='calculate']").find("select").bind("change", function () {
                    var calchangehtml = "";
                    $(this).closest('tr').children().eq(3).html(calchangehtml);
                });

                var numinput = "";
                var strinput = "";
                var datesinput = "" +
                        ""
                var dateinput = "";

                var operate = $("td[name='operate']").find("option:selected").val();
                if (operate == "介于") {
                    $("td[name='inputname']").html(datesinput);
                } else if (operate == "早于等于" || operate == "晚于等于" || operate == "早于" || operate == "晚于") {
                    $("td[name='inputname']").html(dateinput);
                } else if (operate == "匹配" || operate == "不匹配") {
                    $("td[name='inputname']").html(strinput);
                } else {
                    $("td[name='inputname']").html(numinput);
                }
                var rows = document.getElementById("enumListBody").rows.length;
                var colums = document.getElementById("enumListBody").rows[0].cells.length;
                var table = document.getElementById("enumListBody");
                console.log(table.innerHTML);
                for (var i = 1; i < rows; i++) {
                    var cal= ruledata[i-1].ys;
                    var opt= ruledata[i-1].cz;
                    var input1 = ruledata[i-1].iv1;
                    var input2 = ruledata[i-1].iv2;
                    for (var j = 0; j < colums; j++) {
                        var obj = table.rows[i].cells[j];
                        if(j==2){
                            $(obj).find("option[value='"+cal+"']").attr("selected",true);
                        }
                        if(j==3) {
                            $(obj).find("option[value='"+opt+"']").attr("selected",true);
                        }
                        if(j==4){
                            $(obj).find("input[name='inputone']").attr("value",input1);
                            $(obj).find("input[name='inputtwo']").attr("value",input2);;
                        }
                    }
                }
                getChangeInput();  //输入框校验部分
            },
            error: function (data) {
            }
        });
    }
1 个回答
  • 是不是页面还没加载完就点击按钮,页面还没渲染td[name='filename']这个标签,所以获取不到这个对象

    2022-11-12 15:37 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有