javascript - 动态添加的元素,怎么遍历它们的功能及内容-PHP中文网问答

如图：要实现的功能是,点击上方添加按钮,下边动态添加表格的行,然后每个行里的内容都是从对象里遍历出来的。
然后我就只有第一个html里写出来的行有内容有功能。
而之后点击按钮出来的行，没有内容也没有功能。（注：功能指的是,我的第一个列和第二个列，是二级联动效果的）

下面是代码：（本人菜鸟一个,jq也不是很熟,就写的很乱,而且还是js和jq混着写的=-=，求大佬们轻喷,求指导！）

//点击按钮添加

    $('.button2').on('click',function(){
    var ccc = $('');
    var ddd = $('#zType_all');
    ddd.append(ccc);
    $('#a').css({"background":"white","color":"#000"});
    });



//下面是关于二级和三级联动的遍历
//这个是存储着option里信息的对象

    var zType_chose = [
    {
    "name":"年终汇算","types":[
        {"years":"2015年"},
        {"years":"2016年"}
        ]
     },
     {
        "name":"预缴-月度","types":[
        {"years":"2015年","zType_time1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]},
        {"years":"2016年","zType_time1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}
        ]
     },
     {
        "name":"预缴-季度","types":[
        {"years":"2015年","zType_time1":["第一季度","第二季度","第三季度","第四季度"]},
        {"years":"2016年","zType_time1":["第一季度","第二季度","第三季度","第四季度"]}
        ]
     }
     ];

    //下面是我实现联动的js代码
    var zType_time = document.getElementById("zType_time");
    var zType_years = document.getElementById("zType_years");
    var month_quarter = document.getElementById("month_quarter");
    var zType_all = document.getElementById("zType_all");
    zType_time.options[0] = new Option("计算期类型");
    zType_years.options[0] = new Option("请选择年");
    month_quarter.options[0] = new Option("请选择月/季度");
    // 循环第一步把计算期类型循环进select
    for (var i = 0; i < zType_chose.length; i++) {
    zType_time.options[zType_time.length] = new Option(zType_chose[i].name);
    // 循环第二步,把第二列都循环进select
    zType_time.onchange = function(){
    zType_years.options.length = 0;
    month_quarter.options.length = 0;
    zType_years.options[zType_years.length] = new Option("请选择年");
    month_quarter.options[month_quarter.length] = new Option("请选择月/季度");
    for (var j = 0; j < zType_chose[zType_time.selectedIndex-1].types.length; j++) {
        zType_years.options[zType_years.length] = new Option(zType_chose[zType_time.selectedIndex-1].types[j].years)
    }
    if(zType_time.options[zType_time.selectedIndex].text == "年终汇算"){
        month_quarter.style.display = "none";
    }else{
        month_quarter.style.display = "inline-block";
    }
    }
    zType_years.onchange = function(){
        month_quarter.options.length = 0;
        month_quarter.options[month_quarter.length] = new Option("请选择月/季度");
        //循环另一个
        for (var k = 0; k < zType_chose[zType_time.selectedIndex-1].types[zType_years.selectedIndex-1].zType_time1.length; k++) {
            month_quarter.options[month_quarter.length] = new Option(zType_chose[zType_time.selectedIndex-1].types[zType_years.selectedIndex-1].zType_time1[k]);  
        };
    }
    };

我觉得可能是要在创建表格的行的时候就应该把内容给遍历进去？可是我不会诶,还有就是我那个功能怎么办。
在线等一个大牛

告诉我！万分感谢！急！

全部回复(3)

某草草2017-06-12 09:30:08 3楼

把遍历数据的代码，放在你点击添加行这个方法的里面，具体协调如何添加一行遍历一条，这个还是你自己实现，我没细看。你现在有点象动态添加的元素，你绑定事件，结果再html写好的绑定上去了，但是添加的没绑定上事件一样

赞 +0

添加回复

欧阳克2017-06-12 09:30:08 2楼

建议直接用 ui 库吧，jquery 的话，可以选 easyui / bootstrap table 吧

学习ing2017-06-12 09:30:08 1楼

事件绑定在页面渲染完成之后就会绑定成功，之后不会自动绑定，也就是页面渲染完之后添加的节点是无法绑定的，这里说的是$('.a').click(...) 这种类似的方式因为第一次编译的时候会把页面上class为A的绑定一个事件，如果你JS动态条件几个class为a的节点那么之后加的是没有效果的，因为第一次绑定的时候后添加的节点不存在。
解决方式推荐用on（）这个方法例如$('body').on('click','.a',fun(){}) 这种方式就可以，因为不管什么时候 body这个标签都会存在所以不会出现节点找不到而无法绑定的情况。
当然你也可以自己将函数写在节点上但是不推荐这样写。