javascript - 动态添加的元素,怎么遍历它们的功能及内容

Question

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

typecho · Answer

首先，id 在一个页面中只能出现一次，是唯一的，class才可以多次出现！

声明

id 为唯一属性，即一个 html 文件中只能出现一个对应的 id，class 可以使用多个；

需求实现

前端部分大到框架，小到功能，都是可以用设计模式来解决的，说白了，都是可以用 MVC 来解决的，如你的的例子：

C -> 整个 JS 逻辑；
V -> 单行条目；
M -> 填充的数据；

你其实可以把这种东西进行闭包封装，或者做成一个处理类。如：

继续完善脚本：

(function($) {
    'use strict';

    /**
     * 组件条目解析
     * 一行即一个组件条目，该构造方法
     * 例：var thisRow = new AppRow();
     * @return {object} 一个 jQuery 对象
     */
    var AppRow = function() {
        return this.rowParse(this.rowDom());
    };

    // HTML 结构
    AppRow.prototype.rowDom = function() {
        var row = '',
            options = AppRow.typeChose,
            optionYears = options[0].types;

        // 计算期类型
        row += '';

        // 期间
        row += '';

        // 征收方式
        row += '';

        return '' + row + '';
    };

    // 解析行结构，添加事件
    AppRow.prototype.rowParse = function(row) {
        var $row = $(row),
            $typeTime = $row.find('select.type'),
            $typeTypes = $row.find('.types'),
            optionsData = AppRow.typeChose;

        // 计算期类型
        $typeTime.on('change.app', $.proxy(function(e) {
            var val = $typeTime[0].value;
            $typeTypes.children().remove();
            $typeTypes.append(this.selectYears(val));
        }, this));

        return $row;
    };

    // 返回年度表单
    AppRow.prototype.selectYears = function(type) {
        var optionYears = AppRow.typeChose[0].types,
            select = '',
            $select = null;

        // 构建表单
        select += '';

        // 构建成 jQuery 对象
        $select = $(select);

        // 事件绑定
        $select.on({
            // 选择事件
            'change.app': $.proxy(function(e) {
                var val = $select[0].value,
                    $sub = $select.next('.sub');

                if (type <= 0) {
                    // 年终汇算无后续表单
                    return;
                }

                if (val === -1) {
                    // 未选择，则移除后续表单
                    $select.nextAll().remove();
                    return;
                }

                // 创建或或初始化后续表单
                if (!$sub.get(0)) {
                    // 表单不存在则创建
                    $select.after(this.selectSub(type, val));
                }
                $sub.trigger('reset.app');
            }, this),

            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 返回季度或月份表单
    AppRow.prototype.selectSub = function(type, year) {
        var optionData = AppRow.typeChose[type].types[year].zType_time1,
            select = '',
            $select = null;

        if (!optionData) {
            // 无数据
            return;
        }

        // 构建表单
        select += '';
        $select = $(select);

        // 事件绑定
        $select.on({
            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 联动数据 - zType_chose
    AppRow.typeChose = [{
        "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": ["第一季度", "第二季度", "第三季度", "第四季度"]
        }]
    }];

    AppRow.VERSION = '1.0.0';

    // ===========================================

    // 添加按钮事件绑定
    var $addBtn = $('.button2'),
        $rowList = $('#zType_all');

    // 点击添加
    $addBtn.on('click.app', function(e) {
        // 或直接添加实例
        $rowList.append(new AppRow());
    });

})(jQuery);

解释

创建一个构造方法，用于生成一个具有交互封装效果的结构 —— 组件；
为组件添加一系列方法，并在内部创建逻辑；
闭包封装指仅 (function($){ /*code*/ })(jQuery); 中生效；
$.fn.remove可以保证页面的数据的安全性，切忌使用 $.fn.hide；
还可以生使用 AppRow.prototype.delete() 扩展删除操作等；
如果需要使用 name 做数据提交，则需使用 name="row[index][name]" 的格式，如：name="row[1]['type']"、name="row[1]['year']"、name="row[1]['sub']";

最终效果：

在线效果

https://jsfiddle.net/kxjyo7fp...

某草草 · Answer

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

欧阳克 · Answer

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

学习ing · Answer

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

高洛峰 · Answer

我改写了一部分生成 DOM 的脚本，用 jQuery 的方式，为了快速，用了一些 ES6 的语法。但尚未完成功能

https://jsfiddle.net/jrhju549/1/

然后在考虑级联这部分东西的时候，我发现了一个问题(关于数据)：

从数据上来看，不管是哪年月缴和季度的可选数据都是一样的，月是12个月，季是4季度，那么这些数据其实都是固定的，可以直接写在 HTML 中，这样产生新行的时候只需要先克隆再进行细节处理就行了，这样简单得多。

但是，不排除另一种可能性，就是你每年的可选项都不一样。比如 2015 是 12 个月，2016 是 8 个月……(当然这种情况的可能性很低)，那这样的话，就可根据这个数据来动态生成 select。那么在动态生成 select 之前，需要通过一个 findXxxx 函数来找到对应的 option 列表需要使用的数据——这个过程当然就会复杂得多。

就目前的进展来看，主要有几点说明一下

模块化处理

不要想在一个函数中干所有事情，拆分一下，比如我在代码中初步拆分了 createRow 和 createSelect。其中 createSelect 是可以高度复用的

// 创建 select，items 是数据 map 是名称映射表
// 如果名称本来就是按 value 和 text 来命名，就不需要映射表
function createSelect(items, map = {}) {
    const value = map.value || "name";
    const text = map.text || "text";
    const $options = items
        .map(t => $("

首先，id 在一个页面中只能出现一次，是唯一的，class才可以多次出现！

声明

需求实现

解释

最终效果：

在线效果

模块化处理

先整理数据