按钮调用模式对话框:当按钮被点击时,事件被触发,结果事件引用e.relatedTarget是未定义的。那么,我如何从处理程序中获得调用按钮?e似乎不包含任何对调用按钮的引用。
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
jQuery:
$('#myModal').on('show.bs.modal', function (e) {
console.log(e.relatedTarget) // do something...
})
参考:http://getbootstrap.com/javascript/#modals
6条答案
按热度按时间yx2lnoni1#
感谢Geo 1004..我已经在使用JS来触发模态上的“show”事件,但是我缺少了第二个参数。所以event.relatedTarget是未定义的。
如果其他人使用JS路由(而不是使用数据属性),我会确保您将按钮作为jQuery对象发送-
4nkexdtk2#
看看下面的Bootply example。
当运行show事件时,似乎包含了对
e.relatedTarget
的正确引用。查看一下Bootply example,看看您自己的代码是否与它有偏差(我直接从您提供的链接中复制了原始的Bootstrap示例代码片段)。
希望这能帮上忙祝你好运。
busg9geu3#
这是一个解决方案。你可以用JS打开modal,然后设置relatedTarget。你应该把button作为modal方法的第二个参数传递。
您将能够传递数据引用(这里是address-target)
aor9mmx14#
我也遇到了同样的问题,浪费了整个晚上来解决它。我的bootstrap.js版本太旧了,$(event.relatedTarget)不能用于'show.bs.modal'事件。任何有同样问题的人都应该先检查他的bootstrap版本。然后简单地坚持官方网站的例子:http://getbootstrap.com/javascript/#modals-related-target您可以在$(event.relatedTarget)中找到引用。
xv8emn3q5#
6qfn3psc6#