jQuery DOM的改变需要JS重新运行,JS是一个生命周期

jQuery DOM change requires JS to be run again, JS is an IIFE

本文关键字:JS 周期 生命 一个 DOM 改变 重新运行 jQuery      更新时间:2023-09-26

我使用下面的JavaScript代码片段来自一个主题。

(function(namespace, $) {
    "use strict";
    var AppForm = function() {
        // Create reference to this instance
        var o = this;
        // Initialize app when document is ready
        $(document).ready(function() {
            o.initialize();
        });
    };
    var p = AppForm.prototype;
    // =========================================================================
    // INIT
    // =========================================================================
    p.initialize = function() {
        // Init events
        this._enableEvents();
        this._initRadioAndCheckbox();
        this._initFloatingLabels();
        this._initValidation();
    };
    // =========================================================================
    // EVENTS
    // =========================================================================
    // events
    p._enableEvents = function () {
        var o = this;
        // Link submit function
        $('[data-submit="form"]').on('click', function (e) {
            e.preventDefault();
            var formId = $(e.currentTarget).attr('href');
            $(formId).submit();
        });
        // Init textarea autosize
        $('textarea.autosize').on('focus', function () {
            $(this).autosize({append: ''});
        });
    };
    // =========================================================================
    // RADIO AND CHECKBOX LISTENERS
    // =========================================================================
    p._initRadioAndCheckbox = function () {
        // Add a span class the styled checkboxes and radio buttons for correct styling
        $('.checkbox-styled input, .radio-styled input').each(function () {
            if ($(this).next('span').length === 0) {
                $(this).after('<span></span>');
            }
        });
    };
    // =========================================================================
    // FLOATING LABELS
    // =========================================================================
    p._initFloatingLabels = function () {
        var o = this;
        $('.floating-label .form-control').on('keyup change', function (e) {
            var input = $(e.currentTarget);
            if ($.trim(input.val()) !== '') {
                input.addClass('dirty').removeClass('static');
            } else {
                input.removeClass('dirty').removeClass('static');
            }
        });
        $('.floating-label .form-control').each(function () {
            var input = $(this);
            if ($.trim(input.val()) !== '') {
                input.addClass('static').addClass('dirty');
            }
        });
        $('.form-horizontal .form-control').each(function () {
            $(this).after('<div class="form-control-line"></div>');
        });
    };
    // =========================================================================
    // VALIDATION
    // =========================================================================
    p._initValidation = function () {
        if (!$.isFunction($.fn.validate)) {
            return;
        }
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }
                else if (element.parent('label').length) {
                    error.insertAfter(element.parent());
                }
                else {
                    error.insertAfter(element);
                }
            }
        });
        $('.form-validate').each(function () {
            var validator = $(this).validate();
            $(this).data('validator', validator);
        });
    };
    // =========================================================================
    // DEFINE NAMESPACE
    // =========================================================================
    window.materialadmin.AppForm = new AppForm;
}(this.materialadmin, jQuery)); // pass in (namespace, jQuery):

这个JavaScript做一些UI的东西。

我还为我的应用程序编写了一些jQuery/JS。这个jQuery从DOM中添加和删除HTML。

我有一个表单和两个按钮,一个是添加,一个是删除。当用户单击添加/删除时,它会复制或删除其中一个表单。

这样做之后,上面JS的效果不再应用。我如何在每次DOM更改时重新应用它?

您已经获得了附加到窗口对象的AppForm函数的实例:

window.materialadmin.AppForm = new AppForm;

所以你可以直接调用:

materialadmin.AppForm.initialize();

在完成DOM操作之后?

如果没有,则需要修改AppForm,使其应用于未来的元素(而不仅仅是初始化期间在DOM中找到的元素)。或者提供一个包装器和/或公共方法,使您能够在DOM更改后访问所需的AppForm功能。

与其再次调用initialize()并绑定额外的单击事件,为什么不更改单击事件以便它们在未来的元素上触发呢?所以不是:

$('[data-submit="form"]').on('click', function (e) {
  // do stuff
}

试题:

$('body').on('click', '[data-submit="form"]', function (e) {
  // do stuff
}