![](/img/trans.png)
[英]Calling AngularJS function from a remote page loaded by Bootstrap modal
[英]Bootstrap modal 'loaded' event on remote fragment
我目前正在使用 Twitter Bootstrap 模态组件,但我遇到了一个问题,即我在使用 data-remote 属性远程加载的内容中的输入字段上使用 jquery 验证插件。
因为内容是在 jquery 验证通过 dom 之后加载的,所以不会对新加载的元素进行验证。
我有一个修改 bootstrap.js(模态类)的解决方案,见下文。
var Modal = function (element, options) {
this.options = options
this.$element = $(element)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
//this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded')
}, this)) //my additions
}
我对加载外部 html 片段的调用触发了一个“加载”事件。
我已经连接了这个事件,我调用了新加载元素的验证。
$('#myModal').on('loaded', function () {
$.validator.unobtrusive.parse($(this));
});
我的问题是我必须修改 bootstrap.js 才能实现这一点,有没有一种方法可以让我在不修改 bootstrap.js 的情况下在外部工作? 有没有办法访问页面上的模态对象并将“加载”事件附加到它? 我想在外部脚本或页面内执行此操作,因此我无需担心引导程序版本。
这里只是更新:
Bootstrap 添加了一个加载事件。
http://getbootstrap.com/javascript/#modals
在模态上捕获 'loaded.bs.modal' 事件
$('#myModal').on('loaded.bs.modal', function (e) {
// do cool stuff here all day… no need to change bootstrap
})
根据这两个问题:
https://github.com/twbs/bootstrap/issues/5169
https://github.com/twbs/bootstrap/pull/6846
..截至目前,Bootstrap 开发人员正在竭尽全力并拒绝将loaded
事件添加到 Bootstrap 中。
因此,他们建议您避免使用data-remote
标记,而是自己将data-remote
加载到模态中:
$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
// do cool stuff here all day… no need to change bootstrap
}')
'loaded.bs.modal' 事件对我不起作用,所以我尝试了 'shown.bs.modal' 事件并且它工作正常:
$('#myModal').on('shown.bs.modal', function () {
// do cool stuff here...
});
在显示模态后捕获此事件。
我希望这会帮助某人:)
我有一个相当有趣的捕捉,对我来说,在本地主机上,该事件loaded.bs.modal
是在事件之前发射shown.bs.modal
因为本地主机上取出由“数据的行为remote
” URL(这是local btw ),甚至在引导程序可以完成其转换并触发shown.bs.modal
事件之前shown.bs.modal
发生。
但在网络服务器上,事件按感知顺序触发。
首先显示的shown.bs.modal
被触发,然后由于远程url 的实际延迟,事件loaded.bs.modal
被触发。
我想要的是抓住最后发生的事件。
所以为了解决它,我想出了我自己的实现,如下所示。 YMMV,现在这里有很多假设,所以把下面的代码当作一个 POC 和一粒盐而不是一个完整的代码。
jQuery('#myModal').on('shown.bs.modal', function () {
if (jQuery(this).find('.resetFlag').length) {
// Do something ONLY IF "loaded.bs.modal" hasn't yet been triggered
}
});
jQuery('#myModal').on('loaded.bs.modal', function (e) {
if (jQuery(this).find('.resetFlag').length) {
// Do something ONLY IF "shown.bs.modal" hasn't yet been triggered
} else {
// Do something ONLY IF "shown.bs.modal" hasn already been triggered
}
});
jQuery('#myModal').on('hidden.bs.modal', function () {
jQuery('#myModal .modal-content').html('<div class="resetFlag" style="display:none;"></div>');
showModalLoader();
});
Boostrap 3.3的模态事件有loaded.bs.modal
事件。
但是在Bootstrap 4的模态事件中没有这个事件。 我建议使用shown.bs.modal
事件,因为它会在 CSS 呈现后触发
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.