Jquery 增加新元素导致老元素被重复绑定同样的事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011944141/article/details/80652181

核心代码就是解绑之前的事件，再重新绑定：

//解帮
self.$wxAdd.off();
self.$wxDel.off();
self.$wxChildAdd.off();
self.$wxChildDel.off();

全代码

var wxList = {
            init:function() {
                this.build();
                this.order();
                this.initEvent();
            },
            build:function () {
                //组元素
                this.$wxList = $(".wx-list");
                this.$wxAll  = this.$wxList.find('.wx-element');
                this.$wxAdd  = this.$wxList.find(".add-wx");
                this.$wxDel  = this.$wxList.find(".del-wx");

                this.$wxOne  = $(".add-wx-box .wx-element").clone();

                //子元素
                this.$wxChildOne = $(".add-wx-child-box .wx-child").clone();
                this.$wxChildAdd = this.$wxList.find(".add-wx-child");
                this.$wxChildDel = this.$wxList.find(".del-wx-child");
            },
            initEvent:function () {
                var self = this;

                //解帮
                self.$wxAdd.off();
                self.$wxDel.off();
                self.$wxChildAdd.off();
                self.$wxChildDel.off();

                //添加组
                self.$wxAdd.on('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    self.$wxList.append(self.$wxOne);
                    self.init();
                });

                //删除组
                self.$wxDel.on('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).parents('.wx-element').remove();
                    self.init();
                });

                //添加子元素
                self.$wxChildAdd.on('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).parents('.wx-child-box').append(self.$wxChildOne);
                    self.init();
                });

                //删除子元素
                self.$wxChildDel.on('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    $cur = $(this).parents('.wx-child');
                    $other = $cur.siblings();
                    console.log($cur);
                    console.log($other);
                    if ($other.length === 0) {
                        $cur.find('input:first').val('');
                        $cur.find('input:last').val('');
                    } else {
                       $cur.remove();
                    }
                    self.init();
                });

            },
            order:function () {
                var self = this;

                self.$wxAll && self.$wxAll.each(function(i, e) {
                    console.log($(e));
                    $(e).find('input:first').attr('name', 'wechat['+i+'][start_days]');
                    $(e).find('input').eq(1).attr('name', 'wechat['+i+'][end_days]');
                    $(e).find('.wx-child').each(function (k, v) {
                        $(v).find('input:first').attr('name', 'wechat['+i+'][config]['+k+'][mobile]');
                        $(v).find('input:last' ).attr('name', 'wechat['+i+'][config]['+k+'][qrcode]');
                    });
                });
            },
        };
        wxList.init();