twitter-bootstrap Bootstrap 模态对话框，show.bs.modal 事件相关目标未定义。如何获得点击元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23891478/
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 dialog, show.bs.modal event relatedTarget is undefined. How can I get clicked element?
提问by eyn
Button invoked modal dialog: When button is clicked, event is fired the resulting event reference e.relatedTarget is undefined. So, how can I get the invoking button from the handler? e does not seem to contain any reference to the invoking button.
按钮调用模式对话框：单击按钮时，将触发事件，结果事件引用 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:
jQuery：
$('#myModal').on('show.bs.modal', function (e) {
console.log(e.relatedTarget) // do something...
})
Reference: http://getbootstrap.com/javascript/#modals
回答by László Koller
Take a look at the following Bootply example.
看看下面的Bootply 示例。
When run the show event seems to include a proper reference to e.relatedTarget.
运行时，show 事件似乎包含对e.relatedTarget.
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if (button != null)
{
alert("Launch Button ID='" + button.id + "'");
}
})
Take a look at the Bootply exampleto see if your own code deviates from it. (I copied the original Bootstrap sample code snippet directly from the linkthat you provided.)
看一下Bootply 示例，看看你自己的代码是否偏离了它。（我直接从您提供的链接中复制了原始 Bootstrap 示例代码片段。）
I hope this helps. Good luck.
我希望这有帮助。祝你好运。
回答by JDev518
Thanks Geo1004.. I was already using JS to trigger the "show" event on the modal, but I was missing the second argument. So the event.relatedTarget was undefined.
谢谢 Geo1004 .. 我已经在使用 JS 来触发模式上的“显示”事件，但我错过了第二个参数。所以 event.relatedTarget 是未定义的。
If anyone else is going the JS route (instead of using data attributes) I would make sure you are sending the button as a jQuery object -
如果其他人正在使用 JS 路线（而不是使用数据属性），我会确保您将按钮作为 jQuery 对象发送 -
$( "#myModal" ).modal( "show", $( "#buttonBeingClicked" ) );
回答by geo1004
This is a workaround. You can open the modal with JS instead and relatedTarget will be set. You should not miss to pass the button as a second parameter for the 'modal' method.
这是一种解决方法。您可以改为使用 JS 打开模态，并将设置 relatedTarget。您不应错过将按钮作为 'modal' 方法的第二个参数传递的情况。
You will be able to pass data references (here address-target)
您将能够传递数据引用（这里是地址目标）
$('.listing_btn').on 'click', ->
$('.modal').modal('show', $(@))
$('#modal').on 'show.bs.modal', (event)->
button = $(event.relatedTarget)
address_id = button.data('address-target')
console.log address_id 回答by Hector
I had the same problem and wasted the whole evening to fix it. My bootstrap.js version was simply to old and the $(event.relatedTarget) was not available for the 'show.bs.modal' event. Anyone with the same problem should check his bootstrap version first. Then simply stick to the official site example : http://getbootstrap.com/javascript/#modals-related-targetYou'll find your reference in $(event.relatedTarget).
我遇到了同样的问题，浪费了整个晚上来解决它。我的 bootstrap.js 版本太旧了，$(event.relatedTarget) 不可用于 'show.bs.modal' 事件。任何有同样问题的人都应该先检查他的引导程序版本。然后只需坚持官方网站示例：http: //getbootstrap.com/javascript/#modals-related-target您将在 $(event.relatedTarget) 中找到您的参考。
回答by Akshay Bajpei
$('#myModal').on('show.bs.modal', function (e) {
console.log($(e.relatedTarget)); // You will get the element you want! Cheers
})
