未在指定div內加載Jquery對話框

我注意到使用load()加載的Jquery對話框未加載到匹配元素中。這裏是我的父文檔：未在指定div內加載Jquery對話框

<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 

    $('#button1').click(function() { 
     $('#loaded-dialog-wrapper').load('child.html'); 
    }); 
    }); 
    </script> 
</head> 

<body> 
    <button id='button1'>Click</button> 

    <div id='loaded-dialog-wrapper'></div> 
</body> 

</html>

和含有加載的對話框中的文件：

<script> 
$(document).ready(function(){ 
var dialogOpts = { 
    width: 600, 
    height: 400, 
    modal: true, 
    autoOpen: false, 
    draggable: false, 
    buttons: [{text: "Close", click: function() { $(this).dialog("close");} }], 
}; 

$('#loaded-dialog').dialog(dialogOpts); 
$('#loaded-dialog').dialog('open'); 

}); 
</script> 

<div id='loaded-dialog'> 
    <p>Text</p> 
</div>

#loaded-dialog-wrapper被加載，但它不包含#loaded-dialog;它只有script節點。相反，#loaded-dialog包含在div內，它作爲子節點添加到body節點。如果關閉對話框，對話框將消失，當再次單擊該按鈕時，將顯示對話框，並以與以前相同的方式創建一個新的div。如果我更改#loaded-dialog內的內容，則在第二次打開時，顯示的對話框不包含更新的內容。但是，包含新內容的#loaded-dialog包含在第二個創建的div中。

來源

2014-10-30 user2233706

JqueryUI moves the dialog div inside another div，並將它作爲body節點的孩子。這是我觀察到的。爲了解決這個問題，我在關閉對話框後摧毀了添加的div。這是在child.html中的dialogOpts完成的：

var dialogOpts = { 
    width: 600, 
    height: 400, 
    modal: true, 
    autoOpen: false, 
    draggable: false, 
    buttons: [{text: "Close", click: function() { $(this).dialog("close");} }], 
    close: function() { 
    $('#loaded-dialog').dialog('destroy'); // To remove the Jquery stuff 
    $('#loaded-dialog').remove(); // To remove the div 
    }, 
};

來源

2014-10-30 20:11:17 user2233706

將對話框選項移動到主文檔中。然後點擊直接分配到負載的對話中，包裝：

$('#button1').on('click',function() { 
    $('#loaded-dialog-wrapper').dialog(dialogOpts).html('Place your message here'); 
});

你並不需要一個第2文件child.html

來源

2014-10-30 17:02:28

我想保留所有的代碼在child.html中。我不希望parent.html知道任何child.html包含。它應該加載任何內部child.html。這可能嗎？ – user2233706 2014-10-30 17:04:57

請注意，該load（）已被棄用，因爲1.8 http://api.jquery.com/load-event/ 我期望，你必須至少把你的邏輯放在主文檔中，這樣纔會呈現由document.ready（） – 2014-10-30 17:14:10

做child.html的工作，當你調用它明確嗎？ – 2014-10-30 17:16:46

未在指定div內加載Jquery對話框

回答

相關問題