Question

我遇到以下功能问题。我正在动态创建一个bootstrap模式（常规div），我想附加一个函数，我通过一个变量（女巫工作正常）并运行它。（＆＃34;隐藏＆＃34;），但它反而触发一旦打开模态（$（模态）.on（＆＃39; hide＆＃39;，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] );

将其更改为： -

{{1}}

说明： -

在我们提供函数作为参考的JavaScript中，我们使用它的名称而没有任何括号

即。＆＃39; my_func，并将＆＃39;不是＆＃39; my_func（）＆＃39;

作为＆＃39; my_func（）＆＃39;将函数的结果作为引用而不是函数本身。

所以只需删除括号，您的问题就解决了。

Answer 2

根据documentation，您应该使用hidden.bs.modal事件。也不需要检查函数的window对象，只需传递它。

＆＃13;

$('#myModal').modal('show');

var close_function = function () {
  console.log('closed');
}

$('#myModal').on('hidden.bs.modal', close_function);

＆＃13;

<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>

＆＃13;

Answer 3

感谢大家的回答。我找到了解决方案。由于模态是动态生成的，我不得不将调用更改为：

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

现在它就像一个魅力。再次感谢大家！

隐藏动态元素功能。（＆＃39;隐藏＆＃39;）

3 个答案: