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

Question

我正在使用 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() 放在按钮周围，单击打开对话框...但这不会改变任何内容。

Answer 1

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

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

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

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

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

Answer 2

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

$("#content").load("test.html", function(){
//Javascript code
});