Question

我通过像这样的ajax加载模态的内容：

$.ajax({
    url: 'p1.html',
      success: function(data){
        $(data).modal();
        alert('success')
        $('#myModal').on('show.bs.modal', function (e) {
            alert('why not work')
            set_valign_modal() // IMPORTANT - if You do not want to set content of modal boxes in middle in vertical, just remove this function init
        });

快速提问，为什么回调模态：

$('#myModal').on('show.bs.modal', function (e){

不起作用？

Answer 1

为什么回调模态

我可以想到三个可能的原因：

#myModal不是其模式或祖先
在发生之后，你不会挂钩事件。当您显示模态时，show.bs.modal事件会立即触发。因此，如果您在致电$(data).modal();时立即显示该模式，并且在此之后您不会将其挂钩，那么您就错过了它。

您实际上从未将模态中涉及的元素添加到DOM

Answer 2

您正在此行设置一个监听器：

$('#myModal').on('show.bs.modal', function (e) {
            alert('why not work')
            set_valign_modal() // IMPORTANT - if You do not want to set content of modal boxes in middle in vertical, just remove this function init
        });

除非您打算在ajax响应上设置回调，否则应将其设置在其他位置。

此外，此回调仅在触发后调用：

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

并且因为在你的代码中你之前调用了模态，它不会触发回调。

请改为尝试：

$('#myModal').on('show.bs.modal', function (e) {
    alert('why not work');
});

$('#ajax').on('click',function()
{

    $.ajax({
      url: 'p1.html',
      success: function(data){
        $('#myModal').modal('show');

        }
    });
});

我还应该说它只适用于数据==＆＃39; #myModal＆＃39;

的情况

这是一个有效的jsfiddle

Answer 3

    $(function() {

        $.ajax({
            url: 'p1.html',
              success: function(data){

               //## set instance of plugin in variable    
               var $m=$(data).modal(); 

               //and then add event using variable 
               $m.on('shown.bs.modal', function (e) {
                    alert('why not work')
                    set_valign_modal() // IMPORTANT - if You do not want to set content of modal boxes in middle in vertical, just remove this function init
                });
            }
        });
    })

通过ajax和回调引导模态

3 个答案: