如何打開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最初是隱藏的，否則對話的內容將出現在頁面上，他們得到變成對話框之前。