多行JQuery对话框问题
多行JQuery对话框问题
提问于 2013-08-16 19:38:43
在JQuery工作时，我遇到了一些关键的问题。
$(this).dialog('close');是否删除被绑定到显示的内容？如果是，那我怎么才能阻止这件事。
下面是我的密码。
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function cool_function(event){
//alert(event.data.param1);
alert($('#'+event.data.param2).html());
//var dialog = $('#'+event.data.param2).children('#content').html();
$('#'+event.data.param2).children('#content').dialog({
model : true,
autoOpen: true,
buttons: {
"Save": function() {
alert('Content Will be Saved');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('#'+event.data.param2).children('#content').dialog('open');
}
</script>
</head>
<body>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td class="click" id="clickTest1">
<script>
$("#clickTest1").click({param1: "Hello Darshak", param2: "clickTest1"}, cool_function);
</script>
<div>
<img id='' src="gray.jpg"/>
</div>
<div id='content' title='John Doe' style="display:none;">
<div><textarea>Hello this is Text Area</textarea></div>
</div>
</td>
</tr>
<tr>
<td>Ketan B</td>
<td>ketan.b@example.com</td>
<td>ket1</td>
<td class="click" id="clickTest2">
<script>
$("#clickTest2").click({param1: "Hello Ketan", param2: "clickTest2"}, cool_function);
</script>
<div>
<img id='' src="gray.jpg"/>
</div>
<div id='content' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>现在的问题是，当我第一次加载页面时，检查代码中的警报。警报将提供完整的div代码，包括content id代码。
一旦content显示在对话框栏上，我关闭或取消该对话框，然后再次尝试单击相同的第一行，它根本没有content div，并且无法再次获得对话框。
下面是屏幕截图，以更好地理解它。
对话框1
对话框仅在单击“注释”图像时第一次显示。
更新-应答
我得到了答案。这里是相同的变化。
列的改变是这样的，
<td class="click" id="clickTest2">
<script>
$("#clickTest2").click({param1: "content2", param2: "One more text area Hurrey!!!"}, cool_function);
</script>
<div>
<img id='' src="file://c://gray.jpg"/>
</div>
<div id='content2' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
脚本的改变就是这样，
function cool_function(event){
$('#'+event.data.param1).dialog({
model : true,
buttons: {
"Save": function() {
alert('Content Will be Saved');
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-16 21:16:22
好吧，我已经看过你提供的全部代码了，这太复杂了..太多的递归调用。因此，我使代码变得有点简单，而不是递归地调用模式(这实际上导致了content与对话框的un )，我隔离了如下内容：
HTML:
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td class="click" id="clickTest1">
<div>
<img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
</div>
<div id='content1' title='John Doe' style="display:none;">
<div><textarea>Hello this is Text Area</textarea></div>
</div>
</td>
</tr>
<tr>
<td>Ketan B</td>
<td>ketan.b@example.com</td>
<td>ket1</td>
<td class="click" id="clickTest2">
<div>
<img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
</div>
<div id='content2' title='Ketan B' style="display:none;">
<div><textarea>One more text area Hurrey!!!</textarea></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>JS:
$("#clickTest1").on('click', callModal1);
$("#clickTest2").on('click', callModal2);
function callModal1(){
$(function() {
$( "#content1" ).dialog(({
buttons: [
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
}));
});
}
function callModal2(){
$(function() {
$( "#content2" ).dialog(({
buttons: [
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
}));
});
}在这里，一旦调用发生，模式/对话框将打开，但一旦您单击关闭图标或取消按钮关闭对话框，内容将不会被卸载，对话仍将出现在随后的点击。
我已经为您绑定了它，您可以在：http://jsbin.com/oxucak/1/edit中看到工作解决方案。记得去run with js。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18280898
复制相关文章
相似问题
腾讯云开发者
