事件对象始终具有relatedTarget undefined

Question

引导事件在可用事件内提供给我们event.relatedTarget。 我正在使用shown.bs.modal。在正常情况下，event.relatedTarget具有按钮对象，我们可以通过在下面的按钮上使用onlick事件来点击并激活模式。

$("#buttonId").click(function(){ 
    $("#modalId").modal('toggle'); 
}); 

那么我们可以用下面的方式来获得按钮

$('#modalId').on('shown.bs.modal', function(event) { 
    var button = $(event.relatedTarget); // Button that triggered the modal 
}); 

现在我在文件管理器插件的工作中，我对浏览文件上下文菜单结合，并在上下文菜单中我有一个菜单项Rename，当我点击重命名，我必须打开模式窗口并发送文件名，我必须重命名。我可以通过上下文菜单选项选择发送文件名，即通过单击重命名选项，我可以获得文件div的对象，该文件具有属性ID内的文件名，但这不会帮助，因为我需要引导程序中的文件div对象显示事件，我从与调用该函数 openRenameWindow(#clickedFileDivObject);打开模式在上下文菜单回调函数和函数内我打开如下图所示

function openRenameWindow{ 
    $("#rename-file").modal('toggle'); 
} 

现在的问题是模态时，我的事件绑定事件对象的shown.bs.modal始终有未定义的relatedTarget。有人可以指导我如何获得文件名。

Answer 1

至于我的理解，你需要传递一些东西到你的模式窗口，如果我理解错误，请通过添加评论来纠正我。

简单的解决方案：

您的问题引起的，你没有通过button对象作为第二PARAM当你切换的显示/显示模态窗口：

//pass button object 
$("#rename-file").modal('toggle', $("#buttonId")); 

你可以做以下情形太：

每个链接应该有一个类.rename和你可以保存fileName作为数据属性在你的按钮或按钮旁边的div，当你打开模式窗口通过e 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两种解决方案：

如果您需要在模态窗口更多的选择，这是一个library基于Bootstrap 4