[英]Event object always has relatedTarget undefined
bootstrap events provide us event.relatedTarget
inside the available events. 引导事件在可用事件内向我们提供了
event.relatedTarget
。 I am using shown.bs.modal
. 我正在使用
shown.bs.modal
。 In normal cases event.relatedTarget
has the button object from where we click and activate the modal by using onlick event on the button like below. 在正常情况下,
event.relatedTarget
具有按钮对象,我们可以在其中单击并通过使用按钮上的onlick事件激活模态,如下所示。
$("#buttonId").click(function(){
$("#modalId").modal('toggle');
});
then we can use the following way to get the button 然后我们可以使用以下方式获取按钮
$('#modalId').on('shown.bs.modal', function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
});
Now i am working on a filemanager plugin in which i have context menu binding on the browsed files, and inside the context menu i have a menu item Rename
, when i click on rename i have to open the modal window and send the file name that I have to rename. 现在我正在使用一个filemanager插件,在其中我在浏览的文件上绑定了上下文菜单,并且在上下文菜单中有一个菜单项
Rename
,当我单击重命名时,我必须打开模式窗口并发送该文件名我必须重命名。 I can send the filename via context menu options selection ie by clicking on the Rename option i can get the object of the file div which has the filename inside the attribute id, but this will not help because i need the file div object inside the bootstrap shown event and i am opening the modal by calling the function openRenameWindow(#clickedFileDivObject);
我可以通过上下文菜单选项选择来发送文件名,即通过单击“重命名”选项,我可以得到文件div的对象,该文件的div的属性ID内有文件名,但这无济于事,因为我需要引导程序中的文件div对象显示的事件,我通过调用函数
openRenameWindow(#clickedFileDivObject);
打开模式openRenameWindow(#clickedFileDivObject);
from with in the context menu call back function and inside the function i open the modal like below 从上下文菜单中的回调函数和在函数内部我从下面打开模态
function openRenameWindow{
$("#rename-file").modal('toggle');
}
now the problem is when i bind the event for the shown.bs.modal
the event object always have the relatedTarget
undefined . 现在的问题是,当我为绑定事件
shown.bs.modal
事件对象总是有relatedTarget
不确定的。 Can someone guide me how can i get the filename there. 有人可以指导我如何在此处获取文件名。
As of my understanding, you need to pass something to your modal window, if I understood wrongly please correct me by adding a comment. 据我了解,您需要将某些内容传递给模态窗口,如果我理解不正确,请通过添加注释来纠正我。
Simplest solution: 最简单的解决方案:
Your problem caused as you did not pass the button
object as a second param when you toggled the modal window for show/display: 由于在切换显示/显示的模式窗口时未将
button
对象作为第二个参数传递而导致的问题是:
//pass button object
$("#rename-file").modal('toggle', $("#buttonId"));
You can do the following scenario too: 您也可以执行以下情形:
Each link should have a class .rename
and you can save fileName
as data attribute in your button or a div next to your button, when you open the modal window pass the fileName
as a data attribute to it. 每一个环节应该有一个类
.rename
,你可以保存fileName
在您的按钮或者一个div作为数据的属性旁边的按钮,当您打开模态窗口传递fileName
作为数据属性给它。
$(".rename").click(function(e){
e.preventDefault();
var $this = $(this);
var fileName = $(this).data("file");
$("#basicModal").data("fileName", fileName).modal("toggle", $this);
});
$("#basicModal").on("shown.bs.modal", function(e){
//data-fileName attribute associated with the modal added in the click event of the button
alert($(this).data("fileName"));
//my data-file associated with the button
alert($(e.relatedTarget).data("file"));
})
Demo in Codepen for both solutions: 两种解决方案的Codepen演示 :
If you need more options in modal windows, Here is a library that I wrote based on Bootstrap 4
如果您需要模式窗口中的更多选项,这是我基于
Bootstrap 4
编写的一个库
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.