javascript - How to traverse the functions and contents of dynamically added elements

Question

As shown in the picture: The function to be realized is to click the add button at the top and dynamically add table rows at the bottom, and then the content in each row is traversed from the object. Then I only have the lines written in the first html that have content and functions. The row that comes out after clicking the button has no content and no function. (Note...

typecho · Answer

First of all, id can only appear once in a page and is unique. Only class can appear multiple times!

Statement

id is the only attribute, that is, only one corresponding id can appear in a html file, and multiple class can be used;

Requirement realization

The front-end part, from the framework to the functions, can all be solved using design patterns. To put it bluntly, they can all be solved using MVC, as in your example:

C -> Entire JS logic;
V -> Single line entry;
M -> filled data;

You can actually encapsulate this kind of thing with a closure, or make it into a processing class. Such as:

Continue to improve the script:

(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);

Explanation

Create a constructor to generate a structure with interactive encapsulation effect - component;
Add a series of methods to the component and create logic inside;
Closure encapsulation refers to only taking effect in (function($){ /*code*/ })(jQuery);;
$.fn.remove can ensure the security of the data on the page. Do not use $.fn.hide；
You can also use AppRow.prototype.delete() to extend delete operations, etc.;
If you need to use name for data submission, you need to use the format of name="row[index][name]", such as: name="row[1]['type']", name="row[1]['year']"、name="row[1]['sub']";

Final effect:

Online effect

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

某草草 · Answer

Put the code for traversing the data in the method where you click to add a row. The specific coordination is how to add a row and traverse one. You have to implement this yourself. I didn't look into it carefully. You are now a bit like a dynamically added element. You bind the event, and the result is bound in the HTML written, but the added element is not bound to the event

欧阳克 · Answer

It is recommended to use the ui library directly. For jquery, you can choose easyui / bootstrap table

学习ing · Answer

Event binding will be successfully bound after the page rendering is completed, and will not be automatically bound afterwards. That is, nodes added after the page is rendered cannot be bound. What we are talking about here is $('.a').click (...) This is a similar method because when it is compiled for the first time, an event will be bound to the class A on the page. If you dynamically condition several nodes with class a in JS, then adding them later will have no effect. , because the node added later does not exist when binding for the first time.
The solution is to use the on() method. For example, $('body').on('click','.a',fun(){}) This method is fine, because the body tag will exist no matter when. Therefore, there will be no situation where the node cannot be found and cannot be bound.
Of course, you can also write the function on the node yourself, but this is not recommended.

高洛峰 · Answer

I rewrote part of the script to generate DOM using jQuery. For speed, I used some ES6 syntax. But the function is not completed yet

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

Then when I was thinking about cascading this part of things, I found a problem (about data):

From the data point of view, the optional data for monthly payment and quarter are the same no matter what year it is. Month is 12 months and quarter is 4 quarters. Then these data are actually fixed and can be written directly in HTML. In this way, when generating new rows, you only need to clone them first and then handle the details, which is much simpler.

However, another possibility cannot be ruled out, that is, your options are different every year. For example, 2015 is 12 months, 2016 is 8 months... (Of course, the possibility of this situation is very low), in this case, the select can be dynamically generated based on this data. Then before dynamically generating select, you need to use a findXxxx function to find the data that the corresponding option list needs to use - this process will of course be much more complicated.

Looking at the current progress, here are a few main points

Modular processing

Don’t think of doing everything in one function, split it up. For example, I initially split createRow and createSelect in the code. Among them, createSelect is highly reusable

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