1

I am loading content with jquery.load() (1.4.2), which includes a form that I turn into a model dialog. When I open the dialog, I dynamically populate a form select list.

It works the first time I load the content, but on subsequent loads it breaks and will only return the last selected item from the previous load. (I also think it doesn't reload the select list on subsequent loads, even though the alert on the dialog open function fires.)

I load the content as:

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

And the test.html file:

<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>

In this example, on a second .load(), if I hit the alert button, it won't return the selected list item - it will only return the first item.

I've tried putting .live() around the button click opening the dialog... but that doesn't change anything.

4

2 に答える 2

3

ダイアログを作成すると、ダイアログが最後に移動します<body>（より重要なのは、外側にあるため、再ロードすると#content死を免れるためです）。#contentつまり、そのコンテンツを取得しても、ダイアログはそのままになり、最初のロード後にIDが重複.load()しているコンテンツをプルしていることになります。

次のように重複する問題を回避するために、最初にそのダイアログ/元のコンテンツを破棄してください。 

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

.remove()さもなければ同様に残されるであろうイベントハンドラーをクリーンアップすることに注意してください。

.live()これにより、同じIDを複数共有する代わりに、一度に1つのボタンと1つのダイアログが正しく表示されるようになるため、ハンドラーも必要ありません。

于 2010-07-29T11:33:42.117 に答える
0

I would put a callback on your load function and run your javascript there

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