Question

看一下这个例子：

example.jsp：

<script type="text/javascript">
  $(document).ready(function() {
    $('#Button1').button().click(function() {
      $("#mainContent").load("example_1.jsp");
    });
  });
</script>

<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>

example_1.jsp：

<script type="text/javascript">
  $(document).ready(function() {
    $("#a").button().click(function() {
      $("#a_form").dialog("open");
    });

    $("#a_form").dialog({
      autoOpen: false,
      height: 480,
      width: 625,
      modal: true
    });
  });
</script>

<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
  Hello!
</div>

我加载example.jsp并按下“RELOAD”按钮。然后，在“mainContent”中，出现按钮“MODAL”，打开一个模态对话框。

但如果我再次按“RELOAD”按钮然后再按“MODAL”，则MODAL DIALOG不再出现！为什么？我在哪里做错了？

Answer 1

那是因为：

<input id="a" type="button" value="MODAL" />

正在使用ID。

当您再次运行加载时，您正在创建另一个带有id=a的输入，这是不允许的。

尝试使用类标识符而不是id

Answer 2

问题可能是因为example_1的脚本块被忽略，因为它被动态加载到页面中。

所以你需要做的是将脚本块移动到example.jsp并使用.live（）代替'#a'而不是.click（）

$("#a").button().live("click", function() {
  $("#a_form").dialog("open");
});

Answer 3

在加载/重新加载主内容之前，尝试清空它然后加载。

<script type="text/javascript">
  $(document).ready(function() {
    $('#Button1').button().click(function() {
      $("#mainContent").html('').load("example_1.jsp");
    });
  });
</script>

JQuery - 在div中重新加载页面后出现模态对话框的问题

3 个答案: