如何打开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由AJAX加载喜欢这个东西simular：

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