Question

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

program.php正在编写以下几种元素：

printf( "<table>"> );

如何在DOM加载之前延迟我通过php创建的元素？它们在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处理程序还没有时间出现。

Answer 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();
});

如果您的问题是其他问题（您提及＆＃34;冲突＆＃34;没有解释那是什么），那么您需要描述实际的冲突问题是什么，以便我们可以帮助您解决根本问题，而不仅仅是在它周围添加一个绑带。请参阅XY Problem，了解为何更好地描述您的实际问题而非您尝试的解决方案。

修改

从您的评论中，您的唯一担心是，在您的事件处理程序到位之前，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)?

在文档准备好之前，如何延迟用php创建的DOM元素的外观

1 个答案: