繁体   English   中英

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

[英]JQuery - Problem with Modal Dialog after reload page in div

看看这个例子:

例如.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>

示例_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”模式对话框不再出现? 为什么? 我在哪里做错了?

那是因为:

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

正在使用 ID。

当您再次运行 load 时,您正在创建另一个id=a输入,这是不允许的。

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

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

所以你需要做的是将该脚本块移动到 example.jsp 和 use.live() for '#a' 而不是.click()

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM