-
Notifications
You must be signed in to change notification settings - Fork 2.5k
动态插入 DOM 的 JavaScript 交互初始化问题
Minwe LUO edited this page Jun 27, 2016
·
1 revision
Amaze UI Web 基于 jQuery 开发,在 document ready
的时候初始化默认接口。动态插入的 DOM 大多已经是在 ready
事件之后,所以没有进行默认的初始化操作。
// Init code
UI.ready(function(context) {
$('[data-am-tabs]', context).tabs();
});
一些插件中通过事件委托可以解决动态插入 DOM 的事件绑定问题,但是并不是所有插件都可以这样,因为有的插件用户操作没有定位到要绑定元素的 DOM 上。比如 https://github.com/twbs/bootstrap/blob/master/js/affix.js 这类插件。
要想自动处理这类问题可以借助 MutationObserver 监视 DOM 变化,但是浏览器支持不好,不得不在插入 DOM 以后,调用相应接口手动初始化,类似问题可以参考打了 event-binding
标签的 issue。
如果觉得逐个初始化麻烦,可以在插入 DOM 以后,调用一下下面的函数:
var utils = {
// 初始化 http://amazeui.org/widgets 中的组件
initAMUIWidhets: function() {
$('[data-am-widget]').each(function() {
var name = this.getAttribute('data-am-widget');
if (AMUI[name] && typeof AMUI[name].init === 'function') {
AMUI[name].init();
}
});
},
// 初始化其他 jQuery 插件
// 注意:需要在 DOM 中添加插件名称标识,如 `data-am-plugin="dropdown"`
initAMUIPlugins: function() {
$('[data-am-plugin]').each(function() {
var plugin = this.getAttribute('data-am-plugin');
if ($.fn[plugin]) {
$(this)[plugin]();
}
});
}
};
Footer