jQuery DOM的改变需要JS重新运行,JS是一个生命周期
jQuery DOM change requires JS to be run again, JS is an IIFE
我使用下面的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
}
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- 主干网的生命周期.js创建过程中的视图
- 更新数据时的React.js生命周期
- 如何将请求生命周期事件封装在 happy.js 中
- 在node.js中,有没有办法识别唯一的调用堆栈/时钟周期
- 节点.js简单的 Web 服务器请求生命周期
- 取消sails.js模型生命周期回调中的默认行为
- 使用回调时express.js请求/响应对象的生命周期
- jQuery DOM的改变需要JS重新运行,JS是一个生命周期
- react.js中的生命周期事件状态和prevState
- 我们来看看ember/ember-data对象的生命周期如何?或者调试Ember.js和Ember-Data的提示/提示
- Windows UWP应用生命周期:如何防止JS/HTML/CSS应用中的重载
- 节点js如何具有前导周期路径