gpt4 book ai didi

jQuery - 通过 .load() 多次加载模态对话框表单并选择列表中断

转载 作者:行者123 更新时间:2023-12-01 08:26:34 25 4
gpt4 key购买 nike

我正在使用 jquery.load() (1.4.2) 加载内容,其中包括一个我将其转换为模型对话框的表单。当我打开对话框时,我动态填充表单选择列表。

它在我第一次加载内容时有效,但在后续加载时它会中断,并且只会返回上次加载中最后选定的项目。 (我还认为它不会在后续加载时重新加载选择列表,即使对话框打开功能上的警报被触发。)

我将内容加载为:

<script>
...
$("#content").load("test.html")
..
</.script>
...
<div id="content"></div>

和 test.html 文件:

<script type="text/javascript">
jQuery(document).ready(function(){
$("#testForm").dialog({
autoOpen: false,
height: 400,
width: 700,
modal: true,
buttons: {
'Alert': function() {
alert($("#testSelectList").val());
},
'Close': function() {
$(this).dialog('close');
}
},
close: function() {
},
open: function() {
alert("Open");
$("#testSelectList").html("<option value=\"one\">one</option><br/>"+
"<option value=\"two\">two</option><br/>"+
"<option value=\"three\">three</option><br/>"+
"<option value=\"four\">four</option><br/>");
}
});
$("#testButton").button().live('click', function() {$("#testForm").dialog('open');});
});
</script>

<div id="testForm" title="Test">
<form>
<fieldset>
<label for="testSelectList">Select List</label><br/>
<select id="testSelectList" class="ui-state-default ui-corner-all">
<option value="">-none-</option></select><br/>
</fieldset>
</form>
</div>

<div id="test">
<h1>Form Select List Test</h1>
<button id="testButton">Open Test Form</button>
</div>

在此示例中,在第二个 .load() 上,如果我点击警报按钮,它不会返回选定的列表项 - 它只会返回第一个项目。

我尝试将 .live() 放在按钮周围,单击打开对话框...但这不会改变任何内容。

最佳答案

当您创建对话框时,它会将其移动到 <body> 的末尾(更重要的是,在 #content 之外,因此当 #content 重新加载时它不会死亡)。那么发生的就是你的 .load() 获取该内容,但对话框仍然存在,并且您在第一次加载后将使用重复 ID 提取内容。

确保首先销毁该对话框/原始内容以避免重复问题,如下所示:

$("#testForm, #test").remove();
$("#content").load("test.html");

请注意 .remove() 清理原本会留下的事件处理程序。

有了这个,就不需要 .live() 处理程序,因为您现在一次可以正确地拥有一个按钮和一个对话框,而不是多个共享相同的 ID。

关于jQuery - 通过 .load() 多次加载模态对话框表单并选择列表中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3360982/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com