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 => $("