。（ 'hide'）の動的要素関数を非表示

Question

次の関数に問題があります。私は動的にブートストラップモーダル（regular div）を作成していますが、変数（魔法使いがうまくいく）を渡してon（ "hide"）を実行する関数をアタッチしたいのですが、代わりにモーダル（$（モーダル）.on（ 'hide'、windowclose_function）;）が開きます。私は行方不明のものがありますか？

おかげ

function openModalFromUrl(modal_url, close_function = function(){}) { 

    var token = $("meta[name='csrf-token']").attr("content"); 

    $.ajax({ 
     data: { 
      '_token': token, 
     }, 
     url: modal_url, 
     type: 'POST', 
     success: function(html) { 

      // create a new modal div 
      var modal = document.createElement("div"); 
      $(modal).addClass('modal fade'); 
      $(modal).attr("role", "dialog"); 

      $('body').append(modal); 

      // place response in the modal 
      $(modal).html(html) 

      // open the modal 
      $(modal).modal('show'); 

      // THIS FIRES IMMEDIATELY 
      $(modal).on('hide', window[close_function]()); 

     }, 

     error: function() { 
      bootbox.alert('Error'); 
     } 

    }); 

} 

Answer 1

問題は、この行である： -

$(modal).on('hide', window[close_function]()); 

に変更し、それを： -

$(modal).on('hide', window[close_function]); 

説明： - JavaScriptで

我々は、参照としての機能を提供し、我々は任意の括弧なしでそれが名前だ

すなわち 'my_func' ではない 'my_func（）'

としての使用'my_func（）'関数の結果を関数自体ではなく参照として渡します。

括弧を削除するだけで問題は解決します。

Answer 2

あなたがhidden.bs.modalイベントを使用する必要がありますdocumentationによります。また、機能のためにwindowオブジェクトをチェックする必要もなく、ただそれを渡します。

$('#myModal').modal('show'); 
 

 
var close_function = function() { 
 
    console.log('closed'); 
 
} 
 

 
$('#myModal').on('hidden.bs.modal', close_function);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="modal fade" id='myModal' abindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </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>

Answer 3

ありがとうございました。私は解決策を見つけました。 モーダルが動的に生成されたように私はへの呼び出しを変更する必要がありました：

$('body').on('hide.bs.modal', modal, window[close_function]); 

今では魔法のように動作します。みんなにおかげさまで！