Php jQuery就绪函数在对话框中被调用两次_Php_Jquery_Dialog_Document Ready

Php jQuery就绪函数在对话框中被调用两次

php jquery

Php jQuery就绪函数在对话框中被调用两次,php,jquery,dialog,document-ready,Php,Jquery,Dialog,Document Ready,我正在用PHP脚本构建一个带有选项卡的jQuery对话框。该脚本在循环中使用“include”指令，在选项卡上迭代并包含其他脚本。每个包含的文件都有选项卡的数据和一个带有jQuery document.ready（）函数的标记。在没有循环的情况下，它基本上是这样做的： <div id="tabDialog"> <div id="tabs"> <ul> <li><a href="#tab1'>Tab1</a&

我正在用PHP脚本构建一个带有选项卡的jQuery对话框。该脚本在循环中使用“include”指令，在选项卡上迭代并包含其他脚本。每个包含的文件都有选项卡的数据和一个带有jQuery document.ready（）函数的标记。在没有循环的情况下，它基本上是这样做的：

<div id="tabDialog">
  <div id="tabs">
    <ul>
      <li><a href="#tab1'>Tab1</a></li>
      <li><a href="#tab2'>Tab2</a></li>
    </ul>
    <div id="tabContainer">
      <div id="tab1">
        <?php include "tab1.php"; ?>
      </div>
      <div id="tab2">
        <?php include "tab2.php"; ?>
      </div>
    </div>
  </div>
</div>

造成这种情况的原因是什么？补救这种情况的最佳方法是什么？我试图将每个选项卡的功能保存在单独的文件中，因为它们可以在多种情况下使用，并且我不必复制与它们关联的代码

感谢您的帮助或建议。

您可能不需要.dialog（'open'）呼叫；改为使用选项：true。

我没有太多地使用

.dialog（）

，但是您需要在脚本中使用jQuery的

ready（）

方法吗

看起来，

.dialog（）

具有可利用的回调选项

选项卡中的脚本：

    <script type="text/javascript">
        function onOpen() { alert('tab1 loaded') };
    </script>

所以我不得不说，我不能100%确定为什么会发生这种情况，尽管我知道对话框会保持它自己的状态，所以这可能是原因之一。但我可能离这里很远。但解决这个问题的方法是使用类似的方法：

$(document).one('ready', function () {
   alert ('tab1 loaded');
});

这将确保它在页面加载时只运行一次。

以下是页面的结果文本。我做了一个查看源代码，然后从页面中删除了任何无关的内容，以使其更简单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
            <div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
                <ul>
                    <li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
                </ul>

                <div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
                    <div id='tab1' class='tabPage ui-dialog-content'>
                        <form id="tab1Form">
                            More testing... <input class="keypressMonitor" type="text">
                        </form>
                        Testing...<br/>
                        Testing...<br/>

                        <script type="text/javascript">
                            $(document).ready (function () {
                                alert ('tab1 loaded');
                                $("#tab1Form").bind ('save', function () {
                                    alert ("in tab1Form.save ()");
                                });
                            });
                        </script>
                    </div>

                    <div id='tab2' class='tabPage ui-dialog-content'>
                        <form id="tab2Form">
                            <div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
                                Testing: <input class="keypressMonitor" type="text">

                                <textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
                            </div>
                        </form>

                        <script type="text/javascript">
                            $(document).ready (function () {
                                $("#tab2Form").bind ('save', function () {
                                    alert ("in tab2Form.save ()");
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>

            <div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
                <button class="applyButton" disabled>Apply</button>
                <button class="okButton" disabled>Ok</button>
                <button class="cancelButton">Cancel</button>
            </div>
        </div>

        <script type="text/javascript">
            $(document).ready (function () {
                $("#tabs").tabs ();
                $("button").button ();

                /**
                 * Pressing the cancel button simply closes the dialog.
                 */
                $(".cancelButton").click (function () {
                    $("#tabDialog").dialog ("close");
                });

                $("#tabDialog").dialog ({
                    open: function () {
                    },
                    autoOpen: true,
                    minWidth: 450,
                    minHeight: 400,
                    width: 600,
                    height: 500,
                    height: 'auto'
                });
            });
        </script>
    </body>
</html>





更多测试。。。
测试…

测试…

$（文档）.ready（函数（）{
警报（“tab1已加载”）；
$（“#tab1Form”）.bind（'save'，function（）{
警报（“在tab1Form.save（）”中）；
});
});
测试：
$（文档）.ready（函数（）{
$（“#tab2Form”）.bind（'save'，function（）{
警报（“在tab2Form.save（）”中）；
});
});
申请
好啊
取消
$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
$（“按钮”）.button（）；
/**
*按下“取消”按钮即可关闭对话框。
*/
$（“.cancelButton”）。单击（函数（）{
$（“#tabDialog”）.dialog（“关闭”）；
});
$（“#tabDialog”）.dialog({
打开：函数（）{
},
自动打开：对，
最小宽度：450，
身高：400，
宽度：600，
身高：500，
高度：“自动”
});
});

我相信我已经找到了原因，并创建了一个相当好的修复程序。当jQuery创建对话框时，它会将包含对话框内容的DIV在DOM中移动（移动到文档的末尾），并使用对话框所需的必要支架（可能通过使用.append（）函数或类似的方法）包围该DIV。由于动态生成的DIV中包含Javascript，jQuery在DOM中重新定位DIV后（即第二次）调用document.ready（）函数。因此，在构建对话框之前，I.remove（）将对话框DIV中的每个脚本标记如下所示：

    $("#tabDialog").find ("script").remove ();
    $("#tabDialog").dialog ({
      autoOpen: true,
      minWidth: 450,
      minHeight: 400,
      width: 600,
      height: 500
    });

这样做会从最初加载的DIV中删除脚本标记，但脚本本身仍然存在。我仍在研究这一点，因为我不完全理解动态加载的Javascript代码实际“存在”的位置，但我怀疑它位于DOM之外的某个地方。我在Chrome、Firefox和Exploder8中验证了这一点

通过在DIV中放置一个按钮并分配一个.click（）函数，我验证了最初包含在加载的DIV中的所有脚本仍能正常工作。下面是一个小测试，演示了这一点：

<html>
  <head>
    <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="dialogContents" style="display: none;">
      <div  style="border: 1px solid black; height: 98%;">
        <form id="testForm">
          <input type="text">
        </form>
        <button id="testButton">Test</button>
        <script type="text/javascript">
          $(document).ready (function () {
            alert ("ready");

            $("#testButton").click (function () {
              alert ('click');
            });
          });
        </script>
      </div>
    </div>
  </body>

  <script type="text/javascript">
    $(document).ready (function () {
      //
      // Remove all the scripts from any place in the dialog contents.  If we
      // do not remove the SCRIPT tags, the .ready functions are called a
      // second time.  Removing this next line of Javascript demonstrates this.
      //
      $("#dialogContents").find ("script").remove ();
      $("#dialogContents").dialog ({
        width: 300,
        height: 300,
        title: 'Testing...'
      });
    });
  </script>

</html>


试验
$（文档）.ready（函数（）{
警惕（“准备就绪”）；
$（“#测试按钮”）。单击（函数（）{
警报（“点击”）；
});
});
$（文档）.ready（函数（）{
//
//从对话框内容的任何位置删除所有脚本。如果
//不要删除脚本标记，.ready函数称为
//第二次。删除下一行Javascript演示了这一点。
//
$（“#dialogContents”）.find（“script”）.remove（）；
$（“#对话框内容”）.dialog({
宽度：300，
身高：300，
标题：“测试…”
});
});

我非常感谢在这篇文章中提供的帮助

我也有这个问题，但我的情况不同。在用作对话框保持器的div内部有一个自动关闭的div元素。当我更换自动关闭元件时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
            <div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
                <ul>
                    <li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
                </ul>

                <div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
                    <div id='tab1' class='tabPage ui-dialog-content'>
                        <form id="tab1Form">
                            More testing... <input class="keypressMonitor" type="text">
                        </form>
                        Testing...<br/>
                        Testing...<br/>

                        <script type="text/javascript">
                            $(document).ready (function () {
                                alert ('tab1 loaded');
                                $("#tab1Form").bind ('save', function () {
                                    alert ("in tab1Form.save ()");
                                });
                            });
                        </script>
                    </div>

                    <div id='tab2' class='tabPage ui-dialog-content'>
                        <form id="tab2Form">
                            <div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
                                Testing: <input class="keypressMonitor" type="text">

                                <textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
                            </div>
                        </form>

                        <script type="text/javascript">
                            $(document).ready (function () {
                                $("#tab2Form").bind ('save', function () {
                                    alert ("in tab2Form.save ()");
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>

            <div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
                <button class="applyButton" disabled>Apply</button>
                <button class="okButton" disabled>Ok</button>
                <button class="cancelButton">Cancel</button>
            </div>
        </div>

        <script type="text/javascript">
            $(document).ready (function () {
                $("#tabs").tabs ();
                $("button").button ();

                /**
                 * Pressing the cancel button simply closes the dialog.
                 */
                $(".cancelButton").click (function () {
                    $("#tabDialog").dialog ("close");
                });

                $("#tabDialog").dialog ({
                    open: function () {
                    },
                    autoOpen: true,
                    minWidth: 450,
                    minHeight: 400,
                    width: 600,
                    height: 500,
                    height: 'auto'
                });
            });
        </script>
    </body>
</html>

    $("#tabDialog").find ("script").remove ();
    $("#tabDialog").dialog ({
      autoOpen: true,
      minWidth: 450,
      minHeight: 400,
      width: 600,
      height: 500
    });

<html>
  <head>
    <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="dialogContents" style="display: none;">
      <div  style="border: 1px solid black; height: 98%;">
        <form id="testForm">
          <input type="text">
        </form>
        <button id="testButton">Test</button>
        <script type="text/javascript">
          $(document).ready (function () {
            alert ("ready");

            $("#testButton").click (function () {
              alert ('click');
            });
          });
        </script>
      </div>
    </div>
  </body>

  <script type="text/javascript">
    $(document).ready (function () {
      //
      // Remove all the scripts from any place in the dialog contents.  If we
      // do not remove the SCRIPT tags, the .ready functions are called a
      // second time.  Removing this next line of Javascript demonstrates this.
      //
      $("#dialogContents").find ("script").remove ();
      $("#dialogContents").dialog ({
        width: 300,
        height: 300,
        title: 'Testing...'
      });
    });
  </script>

</html>

$("#foo").dialog({
  // ...
});

...

<div id="foo" title="My Dialog">
  <div id="bar" />
</div>

$("#foo").dialog({
  // ...
});

...

<div id="foo" title="My Dialog">
  <div id="bar"></div>
</div>

$.dialog({
    <your parameters>
    create: function() {
        <your script>
    }
}