1

我正在使用 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() 放在按钮周围单击打开对话框......但这并没有改变任何东西。

4

2 回答 2

3

当您创建一个对话框时，它会将其移动到的末尾<body>（更重要的是， outside #content，因此在#content重新加载时它会逃脱死亡）。所以发生的事情是您.load()获取了该内容，但对话框仍然存在，并且您在第一次加载后使用重复的 ID提取内容。

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

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

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

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

于 2010-07-29T11:33:42.117 回答
0

我会在你的加载函数上放一个回调并在那里运行你的javascript

$("#content").load("test.html", function(){
//Javascript code
});
于 2010-07-29T09:23:15.197 回答