javascript - Comment parcourir les fonctions et le contenu des éléments ajoutés dynamiquement

Question

Comme le montre l'image : la fonction à réaliser est de cliquer sur le bouton Ajouter en haut et d'ajouter dynamiquement des lignes de tableau en bas, puis le contenu de chaque ligne est parcouru à partir de l'objet.
Ensuite, je n'ai que les lignes écrites dans le premier html qui ont du contenu et des fonctions.
La ligne qui apparaît après avoir cliqué sur le bouton n'a ni contenu ni fonction. (Remarque : la fonction fait référence à ma première colonne et à ma deuxième colonne, qui sont l'effet de liaison de deuxième niveau)

typecho · Answer

Tout d'abord, l'identifiant ne peut apparaître qu'une seule fois dans une page et est unique. Seule la classe peut apparaître plusieurs fois !

Déclaration

id 为唯一属性，即一个 html 文件中只能出现一个对应的 id，class Vous pouvez en utiliser plusieurs ;

Réalisation des exigences

La partie front-end, du framework aux fonctions, peut toutes être résolue à l'aide de modèles de conception. Pour parler franchement, elles peuvent toutes être résolues à l'aide de MVC, comme dans votre exemple :

C -> Logique JS entière
V -> Entrée sur une seule ligne
M -> données remplies ;

Continuez à améliorer le 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);

Explication

;
;
;
(function($){ /*code*/ })(jQuery);
；
$.fn.remove可以保证页面的数据的安全性，切忌使用 $.fn.hidepeut également être utilisé
pour prolonger les opérations de suppression
;
AppRow.prototype.delete()Si nécessaire, utilisez
;
name 做数据提交，则需使用 name="row[index][name]" 的格式，如：name="row[1]['type']"、name="row[1]['year']"、name="row[1]['sub']"Effet final :

Effet en ligne https://jsfiddle.net/kxjyo7fp...

某草草 · Answer

Mettez le code pour parcourir les données dans la méthode où vous cliquez pour ajouter une ligne. La coordination spécifique est de savoir comment ajouter une ligne et en parcourir une. Vous devez l'implémenter vous-même, je ne l'ai pas examiné attentivement. Vous êtes maintenant un peu comme un élément ajouté dynamiquement. Vous liez l'événement, et le résultat est lié dans le code HTML écrit, mais l'élément ajouté n'est pas lié à l'événement

.

欧阳克 · Answer

Il est recommandé d'utiliser directement la bibliothèque ui pour jquery, vous pouvez choisir easyui / bootstrap table

.

学习ing · Answer

La liaison d'événement sera liée avec succès une fois le rendu de la page terminé et ne sera pas automatiquement liée par la suite. Autrement dit, les nœuds ajoutés après le rendu de la page ne peuvent pas être liés ici. .click (...) Il s'agit d'une méthode similaire car lors de sa première compilation, un événement sera lié à la classe A sur la page si vous conditionnez dynamiquement plusieurs nœuds avec la classe a dans JS, puis les ajoutez. later n'aura aucun effet, car le nœud ajouté plus tard n'existe pas lors de la première liaison.
La solution est d'utiliser la méthode on(). Par exemple, $('body').on('click','.a',fun(){}) Cette méthode convient, car la balise body existera. peu importe le moment. Par conséquent, il n'y aura aucune situation dans laquelle le nœud ne pourra pas être trouvé et ne pourra pas être lié.
Bien sûr, vous pouvez également écrire vous-même la fonction sur le nœud, mais ce n'est pas recommandé.

高洛峰 · Answer

J'ai réécrit une partie du script pour générer du DOM en utilisant jQuery. Pour plus de rapidité, j'ai utilisé une syntaxe ES6. Mais la fonction n'est pas encore terminée

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

Puis, quand je pensais mettre en cascade cette partie des choses, j'ai trouvé un problème (à propos des données) :

Du point de vue des données, les données facultatives pour le paiement mensuel et le trimestre sont les mêmes quelle que soit l'année. Le mois est de 12 mois et le trimestre est de 4 trimestres. Ensuite, ces données sont en fait fixes et peuvent être écrites directement en HTML. De cette façon, lors de la génération de nouvelles lignes, il vous suffit d'abord de les cloner, puis de gérer les détails, ce qui est beaucoup plus simple.

Cependant, une autre possibilité ne peut être exclue, c'est-à-dire que vos options sont différentes chaque année. Par exemple, 2015 fait 12 mois, 2016 fait 8 mois... (Bien sûr, la possibilité que cette situation se produise est très faible), dans ce cas, la sélection peut être générée dynamiquement sur la base de ces données. Ensuite, avant de générer dynamiquement une sélection, vous devez utiliser une fonction findXxxx pour trouver les données que la liste d'options correspondante doit utiliser - ce processus sera bien sûr beaucoup plus compliqué.

Au vu des progrès actuels, voici quelques points principaux

Traitement modulaire

Ne pensez pas à tout faire dans une seule fonction, divisez-la. Par exemple, j'ai initialement divisé createRow et createSelect dans le code. Parmi eux, createSelect est hautement réutilisable

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