如何打开ajax加载的jQuery UI对话框？

Question

我试图打开一个jQuery UI对话框，其中HTML已由ajax加载，但我只是收到警报。

    $(document).on("click",'#dialog-button',function(){
        alert('this works');
        $('#dialog').dialog('open');//this doesn't
    });

当我在不使用ajax（和.on）的情况下将html放在模板中时，我没有遇到任何问题。

对话框html由ajax加载，就像这样的东西：

$.ajax({

type: "GET",
dataType: "json",
url: href,

success: function(data){

$('#dialog-container').html(data.dialog);

}

});

在我的php中我会做这样的事情：

<?php 
 //assign some variables
 $array = array('dialog' => $this->smarty->fetch('dialog.tpl'));
 echo json_encode($array);
 ?>

这有效：

$(document).on("click",'#dialog-button',function(){

    alert('this works');

    $('#dialog').dialog({

    autoOpen : true,
    height   : 500,
    width    : 1000,
    modal    : true,
    buttons  : {

        save  : function() {

            sendForm();
            $(this).dialog('close');

        },

        cancel : function() {

            $(this).dialog('close');

        },

        close    : function(){

            allFields.vall('').removeClass('ui-sate-error');

        },

    }

})

})

Answer 1

加载对话框内容后，您需要实际创建对话框：

success: function(data) {
    $('#dialog-container').html(data.dialog);
    $('#dialog').dialog({
       ...,
       autoOpen: false
    });
},

然后你上面的代码实际上会显示出来：

$(document).on("click",'#dialog-button', function() {
    $('#dialog').dialog('open');
});

确保最初隐藏#dialog，否则对话框的内容会在转到对话框之前显示在页面上。