js闭包动态增删页面元素范例

 

 

    <script type="text/javascript">
        (function (window, $, options) {

            /********************************/

            $delegatingHandlersContainer = $('#delegatingHandlersContainer');

            var DelegatingHandlers = {
                //添加
                add: function () {
                    var count = $delegatingHandlersContainer.children('div').length;
                    var item = $delegatingHandlersContainer.append('<div class="form-inline">'
                        + '<input class="form-control" type="text" id="DelegatingHandlers_' + count + '_" name="DelegatingHandlers[' + count + ']" value="">'
                        + '<button type="button" class="btn btn-primary btnAdd">删除</button>'
                        + '<span class="text-danger field-validation-valid" data-valmsg-for="DelegatingHandlers[' + count + ']" data-valmsg-replace="true"></span>'
                        + '</div>');

                    $delegatingHandlersContainer.children('div:last').children('button').click(function (e) {
                        DelegatingHandlers.delete(e);
                    });
                },

                //删除
                delete: function (e) {
                    $(e.currentTarget).parent().remove();
                    DelegatingHandlers.updateDelegatingHandlerIndex();
                },
                //更新索引
                updateDelegatingHandlerIndex: function () {
                    $delegatingHandlersContainer.children('div').each(function (i) {
                        $input = $(this).children('input');
                        $input.attr('id', 'DelegatingHandlers_' + i + '_');
                        $input.attr('name', 'DelegatingHandlers[' + i + ']');
                        $(this).children('span').attr('data-valmsg-for', 'DelegatingHandlers[' + i + ']');
                    });
                }
            };

            $('#btnAddDelegatingHandler').click(function () {
                DelegatingHandlers.add();
            });

            $delegatingHandlersContainer.find('div button').click(function (e) {
                DelegatingHandlers.delete(e);
            });

            /************************************/

            $downstreamHostAndPortsContainer = $('#downstreamHostAndPortsContainer');

            var DownstreamHostAndPorts = {
                //添加
                add: function () {
                    var count = $downstreamHostAndPortsContainer.children('div').length;
                    var item = $downstreamHostAndPortsContainer.append('<div class="form-inline">'
                        + '<label class="control-label" for="DownstreamHostAndPorts_' + count + '__Host">Host</label>'
                        + '<input class="form-control" type="text" id="DownstreamHostAndPorts_' + count + '__Host" name="DownstreamHostAndPorts[' + count + '].Host" value="">'
                        + '<label class="control-label" for="DownstreamHostAndPorts_' + count + '__Port">Port</label>'
                        + '<input class="form-control" type="number" data-val="true" data-val-required="The Port field is required." id="DownstreamHostAndPorts_' + count + '__Port" name="DownstreamHostAndPorts[' + count + '].Port" value="">'
                        + '<button type="button" class="btn btn-primary btnAdd">删除</button>'
                        + '<span class="text-danger field-validation-valid" data-valmsg-for="DownstreamHostAndPorts[' + count + '].Host" data-valmsg-replace="true"></span>'
                        + '<span class="text-danger field-validation-valid" data-valmsg-for="DownstreamHostAndPorts[' + count + '].Port" data-valmsg-replace="true"></span>'
                        + '</div>');

                    $downstreamHostAndPortsContainer.children('div:last').children('button').click(function (e) {
                        DownstreamHostAndPorts.delete(e);
                    });
                },

                //删除
                delete: function (e) {
                    $(e.currentTarget).parent().remove();
                    DownstreamHostAndPorts.updateDownstreamHostAndPortIndex();
                },
                //更新索引
                updateDownstreamHostAndPortIndex: function () {
                    $downstreamHostAndPortsContainer.children('div').each(function (i) {
                        $labels = $(this).children('label');
                        $($labels[0]).attr('for', 'DownstreamHostAndPorts_' + i + '__Host')
                        $($labels[1]).attr('for', 'DownstreamHostAndPorts_' + i + '__Port')

                        $input = $(this).children('input');
                        $($input[0]).attr('id', 'DownstreamHostAndPorts_' + i + '__Host');
                        $($input[0]).attr('name', 'DownstreamHostAndPorts[' + i + '].Host');

                        $($input[1]).attr('id', 'DownstreamHostAndPorts_' + i + '__Host');
                        $($input[1]).attr('name', 'DownstreamHostAndPorts[' + i + '].Port');

                        $span = $(this).children('span');
                        $($span[0]).attr('data-valmsg-for', 'DownstreamHostAndPorts[' + i + '].Host');
                        $($span[1]).attr('data-valmsg-for', 'DownstreamHostAndPorts[' + i + '].Port');
                    });
                }
            };

            $('#btnAddDownstreamHostAndPorts').click(function () {
                DownstreamHostAndPorts.add();
            });

            $downstreamHostAndPortsContainer.find('div button').click(function (e) {
                DownstreamHostAndPorts.delete(e);
            });

            /************************************/
        })(window, jQuery);
    </script>