如何获得Twitter Bootstrap Modal'的invoker元素
How to get Twitter Bootstrap Modal's invoker element?
我有一个a
元素用于调用模态:
<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>
假设这是我的模式:
<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>
我可以将函数绑定到modal触发的事件:
$('#myModal').on('hidden', function () {
// do something…
})
我的问题是:如何从事件订阅者函数访问a
元素(它调用了模态)?
由于event.relatedTarget
,它在Bootstrap 3.0.0中得到了解决。
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
您必须收听:
$('[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'));
});
当然,您可以将show.bs.modal替换为shown.bs.mode或它们触发的任何其他事件。请注意,这适用于Bootstrap 3.0.0。如果你使用2.3.2,你需要去掉.bs.modal(我认为)
我喜欢此解决方案的地方:您不必记住谁是this、self和the以及其他代理调用的解决方案
当然,您必须测试href属性是否不是真正的链接(动态模式加载选项)。
模态元素有一个名为modal
的数据对象,用于保存传递的所有选项。您可以在触发模态的元素上设置一个"source"数据属性,将其设置为源的ID,然后稍后从options
变量中检索它。
触发是:
<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>
在事件回调中,获取modal
数据对象,并查看source
选项:
$('#myModal').on('hidden', function () {
var modal = $(this).data('modal');
var $trigger = $(modal.options.source);
// $trigger is the #launch-modal-1 jQuery object
});
目前它还不能开箱即用。如果您想自己编辑引导程序模式代码,则有一个功能请求和解决方案。
请参阅此处
正如您所说,我遇到了一种情况,必须绑定一些与"invoker"相关的数据。我已经设法通过将"点击"事件绑定到它并处理这样的数据来解决它:
调用程序
<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add">
捕获与调用程序相关的数据的JS(只是一些代码示例)
$('#element').on('click', function () { // Had to use "on" because it was ajax generated content (just an example)
var self = $(this);
});
像这样,您可以随心所欲地处理与调用程序相关的数据。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 在Jquery detachment()和appendTo()之后定位元素
- 在动态创建的元素上获取对特定选择器的引用
- 如何获得Twitter Bootstrap Modal'的invoker元素