如何在呈现后立即显示动态 html 代码并在其上调用动态 jquery答案

【问题标题】：how to show dynamic html code and call dynamic jquery on it as soon as it renders如何在呈现后立即显示动态 html 代码并在其上调用动态 jquery
【发布时间】：2019-05-04 04:14:49
【问题描述】：

我正在开发 React Typescript 应用程序。我从 api 调用响应中获取一些 html 及其 jQuery 脚本。我想从组件中渲染该 html，并希望在 html 渲染后立即调用该 jQuery 脚本。这是一个例子。

html代码：

<div>
<div id="day">This is day div</div> 
<div id="night">This is night div</div>
<div>

jQuery 代码：

$('#day').show();
$('#night').hide();

因此，当组件加载时，两个 div 都会被渲染，但之后 jquery 将运行并隐藏夜间 div，只有白天 div 应该可见。

【问题讨论】：

在页面加载时运行 JavaScript 函数的方法有很多种，到目前为止您尝试过哪些方法？
这不是页面加载。我有单页应用程序，我正在单击按钮加载一个组件。
我已经准备好使用文档开始回答你的问题了……但我不能假装在阅读你的评论后我明白你的问题。
这是同一个概念，你想知道 DOM 什么时候“准备好”。像这样。 stackoverflow.com/questions/38650326/dom-ready-event-in-react/…
另外，如果你想隐藏它，为什么不直接用 CSS 隐藏它呢？

标签： javascript jquery reactjs typescript

【解决方案1】：

在开始时在要隐藏的元素上声明一些不显示的样式标签（JQuery .show 和 .hide 在 display:block 和 display:none 之间发生变化，因此接下来对 .show 和 .hide 的调用将正常工作）：

<div id="day" style="display:block;">This is day div</div> 
<div id="night" style="display:none;">This is night div</div>

如果你想不惜一切代价使用 Javascript，那么你可以在 div 块之后添加一个标签（只是）。如果块在 div 之后，那么 div 将可用于修改 Javascript 代码。

但是可能 JQuery 还不可用，因为 JQuery 通常建议在页面底部加载。您可以更改 JQuery 加载位置，也可以使用简单的 Javascript：

document.getElementById("day").style.display = "none";

或者您也可以在调用 .ready 之前隐藏所有页面内容。

【讨论】：