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

Question

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

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

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

对话框 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 最初是隐藏的，否则对话框的内容会在它们变成对话框之前出现在页面上。