Below is a small example of this. The window in the panel is getting appended to the bottom of the dom, but continuously reloading the panel creates more windows/forms, they even have the same ID.
index.html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
//this works with live(), but is a work-around to the real problem...
//$('#dlg-ok-button').live("click", function(){submitForm();});
$('#p').panel({
onLoad : function() {
//rebinding button to click here submits all the forms in the dom !!!!
$('#dlg-ok-button').click(function() {submitForm();});
var numForms = $('form').length;
$('#num-forms').text("Number of forms in the DOM: " + numForms);
}
});
});
function reloadPanel() {
$('#p').panel("refresh", "panel.html");
}
function submitForm() {
$('#fm').form("submit",{
url: "dopost.php",
success: function(result){
alert(result);
$('#dlg').dialog("close");
}
});
}
function showDialog() {
$('#dlg').dialog('open').dialog('setTitle','Test Dialog');
}
</script>
</head>
<body>
<div>
<div id="p" class="easyui-panel" title="Test Panel"
style="width:500px;height:150px;padding:10px;"
iconCls="icon-save" href="panel.html">
</div>
<br />
<a href="#" id="btn" class="easyui-linkbutton" onclick="reloadPanel();">Reload Panel</a>
<span id="num-forms"></span>
</div>
</body>
</html>
panel.html
<a href="#" id="show-dlg-button" class="easyui-linkbutton" onclick="showDialog();">Open Dialog</a>
<div id="dlg" class="easyui-dialog" closed="true" modal="true" buttons="#dlg-buttons">
<form id="fm" method="post">
Enter your name<br />
<input type="text" name="name">
</form>
</div>
<div id="dlg-buttons">
<a href="#" id="dlg-ok-button" class="easyui-linkbutton">OK</a>
</div>
dopost.php