Question

bootstrap事件在可用事件中为我们提供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
});

现在我正在开发一个filemanager插件，我在浏览文件中有上下文菜单绑定，在上下文菜单中我有一个菜单项Rename，当我点击重命名时我必须打开模态窗口并发送我必须重命名的文件名。我可以通过上下文菜单选项选择发送文件名，即通过单击重命名选项，我可以获取文件div的对象，该文件div具有属性id内的文件名，但这无济于事，因为我需要引导程序内的文件div对象显示事件，我通过调用函数打开模态来自上下文菜单中的openRenameWindow(#clickedFileDivObject);回调函数，在函数内部打开模态，如下所示

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

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

Answer 1

根据我的理解，你需要将一些东西传递给你的模态窗口，如果我理解错误请通过添加评论来纠正我。

最简单的解决方案：

当你切换show / display的模态窗口时，你没有将button对象作为第二个参数传递给你的问题：

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

您也可以执行以下方案：

每个链接都应该有一个类.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两种解决方案：

如果您需要更多模态窗口中的选项，以下是我根据Bootstrap 4

编写的library

事件对象始终具有relatedTarget undefined

1 个答案: