Question

我有2页。第一页有一个对话框，通过jQuery的load（）从另一个页面填充内容。此内容中还有一个对话框。由于某种原因，第一次加载内容时，它工作正常，但如果再次使用它，第二页的对话框内容将显示为该页面的一部分，而不仅仅是一个隐藏的对话框。

这是一个我快速掀起的样本，看看它是否是页面上的其他内容，或者我是如何做错的。这显然是我。：）

第1页：

<!DOCTYPE html>
<html>
<head>
    <link id="Link1" type="text/css"     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div>
    Document 1.
    <a class="ajax" href="http://localhost/doc2.html" >Click Here</a>
</div>

<script>
    $(document).ready(function () {
        $('a.ajax').click(function () {
        var url = this.href;
        var dialog = $('<div></div>').appendTo('body');
        dialog.load(
                url,
                null,
                function (responseText, textStatus, XMLHttpRequest) {

                  dialog.dialog({
                    resizable: false,
                    modal: true,
                    width: '600',
                    height: 'auto',
                    position: 'center',
                    show: "fade",
                    hide: "fade",
                    center: true,
                    close: function (event, ui) {
                      dialog.remove();
                    }
                  });
                }
        );

        return false;
      });
    });
</script>

</body>
</html>

第2页：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div>
    document 2
    <button id="popupButton">Click here to show popup</button>
</div>

<div id="dialog-message">
   This is the popup in document 2.
</div>

<script>
      $(document).ready(function () {
        $("#dialog-message").dialog({
          show: 'blind',
          autoOpen: false,
          modal: true,
          resizable: false,
          width: 900,
          height: 400,
          buttons: {
            Ok: function () {
              $(this).dialog("close");
            }
          }
        });

       $("#popupButton")
              .button()
              .click(function () {
                $("#dialog-message").dialog("open");
              });
      });
</script>

</body>
</html>

*注意 - 由于某种原因，第2页中的对话框无效，但它在我的其他页面中，所以我并不担心。我只是担心页面中出现的对话框内容的奇怪行为。

Answer 1

我找到了一个工作，但不确定这是正确的解决方案。既然它有效，我就会用它来运行。

在第1页中，我更改了javascript：

<script>
    $(document).ready(function () {
        $('a.ajax').click(function () {
            var url = this.href;
            var dialog1 = $('<div></div>').appendTo('body');
            dialog1.load(url, null,
                    function (responseText, textStatus, XMLHttpRequest) {
                      dialog1.dialog({
                        resizable: false,
                        modal: true,
                        width: '600',
                        height: 'auto',
                        position: 'center',
                        show: "fade",
                        hide: "fade",
                        center: true,
                        close: function (event, ui) { 
                            dialog1.remove(); 
                            $("#dialog-message").remove();
                        }
                      });
                    }
            );

            return false;
        });
    });
</script>

在第2页中，我必须这样做以使弹出窗口工作：

<script>
    $(document).ready(function () {
        $("#dialog-message").hide();

        $("#popupButton").button().click(function () {
            $("#dialog-message").dialog({
              show: 'blind',
              autoOpen: true,
              modal: true,
              resizable: false,
              width: 900,
              height: 400,
              zIndex: 9999,
              open: function(event, ui) { $("dialog-message").show(); },
              buttons: {
                Ok: function () {
                  $(this).dialog("close");
                }
              }
            });
        });
    });
</script>

当内容中包含对话框时，在对话框中使用jQuery加载内容无效

1 个答案: