如何延迟使用 php 创建的 DOM 元素的出现，直到文档准备好答案

【问题标题】：How can I delay appearance of DOM elements created with php until document is ready如何延迟使用 php 创建的 DOM 元素的出现，直到文档准备好
【发布时间】：2015-05-09 17:21:28
【问题描述】：

我有一个包含两个文件的程序，一个program.js 和一个program.php。 js 使用 jQuery 并将所有内容包装在 $(document).ready 中，因此一切都在加载 DOM 之后发生。

program.php 正在写一些元素：

printf( "<table>"> );

如何延迟通过 php 创建的元素直到 DOM 加载？它们在 jQuery 创建元素之前生成，我有一些冲突。

我应该将 php 项包装在一个函数中并为其设置延迟吗？

还有更理想的方式吗？感觉不合适

printf("<script>$document.ready(function(){");
//and the rest of elements that I want to delay

编辑：让我想到这一点的最初冲突是 jQuery 文件正在做的事情：

  $("#create-booking").button().on("click", function() {
      dialog.dialog("open");
      });

当 php 正在做的时候：

printf("<button id='create-booking'>Create</button>");

所以事件没有被应用。我的怀疑是 php 元素加载得更快，当它被创建时，jQuery 处理程序还没有时间出现。

【问题讨论】：

您必须使用 Ajax，或者按照您的建议将其包装在 $.ready 中。
They generate before the jQuery created elements, and I have some conflict 也许问这个问题。见XY问题：mywiki.wooledge.org/XyProblem
PHP 首先在您的服务器上运行。因此，在您的页面模板中运行的任何 PHP 都首先运行，远在浏览器甚至看到页面之前。所以 PHP 创建的元素已经完成并且在任何 $(document).ready()` Javascript 在页面中运行之前在页面中。

标签： php jquery dom

【解决方案1】：

如果您的问题只是显示问题之一，并且您只想同时显示所有内容，那么您可以使用 CSS 隐藏 PHP 生成的元素（页面的 HTML 源代码中的元素），然后将它们显示在您的$(document).ready() 处理程序，然后所有内容将同时显示。

例如，如果 PHP 生成的内容在这样的父 div 中：

<div id="container">
   <!-- PHP generated content -->
   <table>
      ...
   </table>
</div>

然后，您可以像这样添加默认的 CSS 样式规则：

#container {display: none;}

然后，添加这个 Javascript：

$(document).ready(function() {
    // do other scripting things here first

    // then show your content, now that everything else is in place
    $("#container").show();
});

如果您的问题是其他问题（您提到“冲突”但没有解释是什么），那么您需要描述实际的冲突问题是什么，以便我们可以帮助您解决根本问题，而不仅仅是在它周围添加创可贴.请参阅XY Problem，了解为什么最好描述您的实际问题而不是您尝试的解决方案。

编辑：

从您的 cmets 看来，您唯一担心的是 PHP 内容可能会在您的事件处理程序到位之前稍微可见。除非您在加载网页时出现异常延迟，否则这通常不会导致网页出现问题，因为显示和事件处理程序安装之间的时间间隔非常小，并且问题的后果非常小（非常快速的单击可能被错过，在这种情况下用户可能会再次点击）。所以，通常人们并不担心这个问题。但是，如果您想解决它，您只能在安装事件处理程序之后才使内容可见。有很多不同的方法可以做到这一点，但我在上面展示了一种。

您应该了解这里有严格的事件顺序。所有 PHP 生成的内容都排在第一位。 PHP 在服务器上运行并创建页面的 HTML。然后将完成的 HTML 发送到浏览器。浏览器开始加载并解析该 HTML。然后，当浏览器遇到作为该页面一部分的<script> 标记时，它将按照脚本标记在页面中出现的顺序运行该脚本。该脚本标记之前的任何<body> 内容（来自您的PHP 服务器）都将已经在页面中并且可见。该脚本标记之后的任何<body> 内容尚不可供该脚本使用。

进一步编辑：

好的，现在您已经解释了您正在通过 Javacript/Ajax 向页面动态添加内容。这可能会在$(document).ready() 之后完成，所以是的，您在添加事件处理程序时会遇到问题。

你有两个选择来解决这个问题：

您可以延迟添加事件处理程序，直到您的 ajax 调用完成添加内容之后。您必须为您的 ajax 调用挂钩完成回调，然后从那里调用一个添加事件处理程序的函数。
您可以切换到使用委托事件处理，它允许您在实际子内容添加到页面之前将事件处理程序添加到现有父元素。下面是一些关于如何使用委托事件处理的参考：

JQuery Event Handlers - What's the "Best" method

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

【讨论】：

您对 XY 的看法是正确的。我没有描述另一个问题，因为我认为它在控制之下：jQuery 文件试图获取通过 php 创建的元素的 id 并应用点击事件处理程序，所以我正在考虑的问题是，如果 php 元素得到在 jQuery 有时间运行之前创建，它们是在没有该处理程序的情况下创建的。尽管这可能没有意义，但我确实需要针对该问题提出不同的问题。
@telex-wap - 问题描述非常合理。我建议您只需使用问题上的“编辑”链接来澄清它。
@telex-wap - 我在关于您的事件处理程序问题的答案末尾添加了一段。
谢谢！虽然我不是很担心能见度的延迟。更多的是应用事件处理程序。我还编辑了原始问题以反映这一点。
@telex-wap - 如果您的脚本在$(document).ready() 中应用事件处理程序，那么您的 PHP 服务器中的所有页面元素都已在页面中可用。因此，除非您使用 Ajax 调用通过 Javascript 向页面动态添加内容，否则您不会遇到您担心的问题。