Javascript 如何获取 Twitter Bootstrap Modal 的调用者元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11570333/
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
How to get Twitter Bootstrap Modal's invoker element?
提问by cnkt
I have got a aelement for invoking modal:
我有一个a用于调用模态的元素：
<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>
And, say this is my modal:
而且，说这是我的模态：
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
I can bind functions to events fired by modal:
我可以将函数绑定到由模态触发的事件：
$('#myModal').on('hidden', function () {
// do something…
})
My question is: How can i access the aelement -which invoked the modal- from my event subscriber function?
我的问题是：如何a从我的事件订阅者函数中访问调用了模态的元素？
回答by lou
It was solved in Bootstrap 3.0.0 thanks to event.relatedTarget.
由于event.relatedTarget.
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
回答by Alex
You have to listen to:
你必须听：
$('[data-toggle="modal"]').on('click', function() {
$($(this).attr('href')).data('trigger', this);
});
$('.modal').on('show.bs.modal', function() {
console.log('Modal is triggered by ' + $(this).data('trigger'));
});
You can of course replace show.bs.modal with shown.bs.modal or any other event they fire.
Note that this is for Bootstrap 3.0.0. If you're using 2.3.2 you need to get rid of .bs.modal(I think).
What I like about this solution: you do not have to remember who is this, self, thatand other proxy calls workarounds.
Of course, you have to test if the href attribute is not a real link (the dynamic modal loading option).
您当然可以将 show.bs.modal 替换为 show.bs.modal 或它们触发的任何其他事件。请注意，这是针对 Bootstrap 3.0.0 的。如果你使用 2.3.2 你需要摆脱.bs.modal（我认为）。
我喜欢这个解决方案的地方：您不必记住this、self、that和其他代理调用解决方法。
当然，您必须测试 href 属性是否不是真正的链接（动态模态加载选项）。
回答by user2109658
The modal element has a data object named modalthat saves all the options that are passed. You can set a 'source' data attribute on the element that triggers the modal, set it to the ID of the source, and then retrieve it later from the optionsvariable.
模态元素有一个名为的数据对象modal，用于保存所有传递的选项。您可以在触发模式的元素上设置“源”数据属性，将其设置为源的 ID，然后稍后从options变量中检索它。
The trigger would be:
触发器是：
<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a>
In the event callback, get the modaldata object, and look at the sourceoption:
在事件回调中，获取modal数据对象，查看source选项：
$('#myModal').on('hidden', function () {
var modal = $(this).data('modal');
var $trigger = $(modal.options.source);
// $trigger is the #launch-modal-1 jQuery object
});
回答by SummerDew
回答by darksoulsong
I had a situation where I had to bind some data related to the "invoker", just like you said. I've managed to solve it by binding a "click" event to it and working with the data like this:
就像你说的那样，我遇到过必须绑定一些与“调用者”相关的数据的情况。我设法通过将“点击”事件绑定到它并处理这样的数据来解决它：
The invoker
调用者
<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">
The JS to catch data related to the invoker(Just some code example)
用于捕获与调用者相关的数据的 JS（只是一些代码示例）
$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
var self = $(this);
});
Like this, you can handle the data related to your invoker anyway you want.
像这样，您可以随心所欲地处理与调用者相关的数据。
