イベントオブジェクトには常にrelatedTargetが定義されていません

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を持っています。名前を変更するときは、モーダルウィンドウを開き、名前を変更する必要があるファイル名を送信する必要があります。私はコンテキストメニューオプションの選択を介してファイル名を送ることができます。すなわち、Renameオプションをクリックすることによって、属性idの中にファイル名を持つファイルdivのオブジェクトを得ることができますが、これはブートストラップの中にファイルdivオブジェクトイベントを示し、iは、コンテキストメニューで関数をコールバックし、関数の内部で、私はイベントをバインドするとき

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

以下のような様相が今問題がある開くとから機能 openRenameWindow(#clickedFileDivObject);を呼び出してモーダルを開封しておりますshown.bs.modalイベントオブジェクトは常にrelatedTargetが未定義です。誰かが私にどのようにファイル名を手に入れることができますか？

Answer 1

あなたのモーダルウィンドウに何かを渡す必要があります。私が間違って理解している場合は、コメントを追加して修正してください。

最も簡単な解決策：

あなたがショー/表示のためのモーダルウィンドウを切り替えるときに、第二のparamとしてbuttonオブジェクトを渡していなかったとして、あなたの問題が発生：

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

あなたは次のシナリオを行うことができます

各リンクのクラスは.renameである必要があります。また、モーダルウィンドウのパスを開くときに、ボタンまたはdivのdivのデータ属性としてfileNameを保存することができますそれにデータ属性として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は：

あなたがモーダルウィンドウでより多くのオプションが必要な場合は、ここで、私は、ブートストラップJSドキュメントに探していたことだったBootstrap 4