twitter-bootstrap 远程片段上的引导模式“加载”事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18959258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal 'loaded' event on remote fragment
提问by scartag
I'm currently using Twitter Bootstrap modal component and i have an issue where I use jquery validation plugin on input fields in the content I load remotely using the data-remote attribute.
我目前正在使用 Twitter Bootstrap 模态组件，我遇到了一个问题，我在使用 data-remote 属性远程加载的内容的输入字段上使用 jquery 验证插件。
Because the content is loaded after jquery validation has run across the dom, validation doesn't occur for the newly loaded elements.
因为内容是在 jquery 验证通过 dom 之后加载的，所以不会对新加载的元素进行验证。
I have a solution where I modify bootstrap.js (the modal class), see below.
我有一个修改 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
}
I trigger a 'loaded' event to the call that loads the external html fragment.
我对加载外部 html 片段的调用触发了一个“加载”事件。
I already have this event wired up and i call the validation on the newly loaded elements.
我已经连接了这个事件，我调用了对新加载元素的验证。
$('#myModal').on('loaded', function () {
$.validator.unobtrusive.parse($(this));
});
My issue is that I had to modify bootstrap.js to achieve this, is there a way I can have this working externally without modifying bootstrap.js? Is there a way to access the modal object on a page and attach the 'loaded' event to it? i'd like to do this in an external script or within a page so i don't need to worry about bootstrap versions.
我的问题是我必须修改 bootstrap.js 来实现这一点，有没有办法让我在不修改 bootstrap.js 的情况下在外部工作？有没有办法访问页面上的模态对象并将“加载”事件附加到它？我想在外部脚本或页面内执行此操作，因此我无需担心引导程序版本。
采纳答案by mccannf
According to both these issues:
根据这两个问题：
https://github.com/twbs/bootstrap/issues/5169
https://github.com/twbs/bootstrap/issues/5169
https://github.com/twbs/bootstrap/pull/6846
https://github.com/twbs/bootstrap/pull/6846
..as of now the Bootstrap developers are digging their heels in and refusing to add a loadedevent into Bootstrap.
..截至目前，Bootstrap 开发人员正在努力并拒绝将loaded事件添加到 Bootstrap 中。
So instead they recommend you avoid using the data-remotemarkup and load the data yourself into the modal:
因此，他们建议您避免使用data-remote标记并自己将数据加载到模态中：
$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
// do cool stuff here all day… no need to change bootstrap
}')
回答by George
Just an update here:
这里只是更新：
Bootstrap has added a loaded event.
Bootstrap 添加了一个加载事件。
http://getbootstrap.com/javascript/#modals
http://getbootstrap.com/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
在模态上捕获 'loaded.bs.modal' 事件
$('#myModal').on('loaded.bs.modal', function (e) {
// do cool stuff here all day… no need to change bootstrap
})
回答by Mohammed Réda OUASSINI
The 'loaded.bs.modal' event doesn't work for me, so I have tried the 'shown.bs.modal' event and it's works fine :
'loaded.bs.modal' 事件对我不起作用，所以我尝试了 'shown.bs.modal' 事件并且它工作正常：
$('#myModal').on('shown.bs.modal', function () {
// do cool stuff here...
});
This event is captured after the modal is shown.
在显示模态后捕获此事件。
I hope this will help someone :)
我希望这会帮助某人:)
回答by Mohd Abdul Mujib
I had a rather interesting catch, In my case, on localhost, the event loaded.bs.modalwas firing beforethe event shown.bs.modalsince on local host the act of fetching the data from the "remote" url(which was local btw), was happening instanteneously even before the bootstrap could finish its transition and trigger the shown.bs.modalevent.
我有一个相当有趣的捕捉，对我来说，在本地主机上，该事件loaded.bs.modal被解雇之前的事件shown.bs.modal，因为本地主机上从“获取数据的行为remote” URL（这是当地顺便说一句，甚至被引导之前instanteneously发生）可以完成它的转换并触发shown.bs.modal事件。
But on a webserver the events were firing in the perceived order.
但在网络服务器上，事件按感知顺序触发。
First the shown.bs.modalwas being triggered and then owing to the pragmatic latency of the remote url, the event loaded.bs.modalwas being triggered.
首先shown.bs.modal是被触发，然后由于远程 url 的实际延迟，事件loaded.bs.modal被触发。
What I wanted is to grab an event whichever happened the last.
我想要的是抓住最后发生的事件。
So to solve it I came up with my own implementation as below. YMMV, Now there are a lot of assumptions here, so take the below code as just a POC and with a grain of salt rather than a full fledged code.
所以为了解决它，我想出了我自己的实现，如下所示。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();
});
