加载特定元素后可以调用函数吗? [复制]
Posted
技术标签:
【中文标题】加载特定元素后可以调用函数吗? [复制]【英文标题】:Can function be called after speficic element is loaded? [duplicate] 【发布时间】:2019-01-21 09:21:54 【问题描述】:加载特定元素后有什么方法可以调用函数吗?
类似这样的:
var element = $('.elements-class');
element.on('load', function()
// Do something
);
编辑(更好的解释):
DOM 准备好后,我有了元素,在该元素中是几张图片和一些文字。因此,我想在加载该块后为其设置动画,并且它都是子块。我不想等待页面的其余部分被加载。只有那个特定的元素,在这个例子中是元素。
【问题讨论】:
使用document.ready
,或者AJAX调用的回调,如果那是你添加html的地方。 load
事件对于 img
和 object
以外的元素不能可靠地工作
而且我的目标不是根据您问题中的此评论
我没有添加任何东西。一切都已经在 .html 文件中。我正在尝试在特定元素完成加载后开始动画。类似的,如果你明白我的意思的话,在加载“首屏”内容后对其进行动画处理。
您可以等待document.ready
事件。 <div>
或 <header>
元素不支持附加到 load
或 ready
事件,load
事件通常针对加载远程资源的元素,例如 <img>
。
这样做:
$(function ()
//Do something
);
您确保在文档完成加载时执行回调中的代码。
跟进您的编辑。您可以将<script>
标签插入到dom 中,它们将按照插入的顺序执行。例如:
<div>
<h1>Fancy title</h1>
<script>
/*
here you can put code to manipulate dom elements inserted
before this script tag.
Trying to do $('p') here will not find the element because
is not already in the dom.
*/
</script>
<p>Lorem ipsum dolor sit amet.</p>
</div>
如果您需要,请告诉我。
【讨论】:
我知道 document.ready 是如何工作的。有什么方法可以在 DOM 准备好后等待元素加载。比如,window.on('load') 是否有同义词,但对于特定元素? 您希望加载的元素来自一些 AJAX 响应,还是在文档准备好之后 附加?因为如果没有,你应该使用 document.ready。 页面加载时,所有内容都按顺序加载。但是,例如,图像是在 window.on('load') 上加载的。但我不想等待整个页面被加载。只有我的第一个元素 (由于您的 HTML 中已经包含所有内容,并且您想要执行一些操作/调用一些您可以使用的函数:
$(document).ready(function ()
//add your code here
);
请参阅 JQuery 文档以更好地了解 .ready 函数的工作原理。
在文档“准备就绪”之前,无法安全地操作页面。 jQuery 会为您检测到这种准备状态。内含代码 $( document ).ready() 只会运行一次页面 Document Object 模型 (DOM) 已准备好执行 javascript 代码。包含代码 $( window ).on( "load", function() ... ) 将运行一次 整个页面(图像或 iframe),而不仅仅是 DOM,都准备好了。
如果您还希望某些函数在元素更改时始终执行某些操作,您可以将 .change() 附加到该元素,如下所示:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
将事件绑定到具有类目标的所有元素。
$( ".target" ).change(function()
alert( "Handler for .change() called." );
);
这将在每次 DOM 在附加元素上发生更改时触发内部更改功能的警报。
【讨论】:
所以,答案是:不,我无法检查是否加载了特定元素(及其子元素)。谢谢。以上是关于加载特定元素后可以调用函数吗? [复制]的主要内容,如果未能解决你的问题,请参考以下文章