javascript - 当 html 中 DOM 完全加载时使用元素

标签 javascript jquery html

我希望在文档完全加载时使用 body 标记的子元素。就像我一样

<body>
    Country: <br>
    <div>
        <datalist id="country"></datalist>          
        <input type="text" list="country" id="search" onmouseover = 'populate("country")'/>         
    </div>  
</body>

在输入元素中,我使用 onmouseover 事件来调用 javascript 函数。但我希望在所有元素完全加载时启用该功能。

到目前为止,我在网上看到有一个onload事件可以在body标签中使用来调用任何特定的函数。但我不想在 onload 事件上调用任何函数,只是想确保当 body 完全加载时应该触发输入元素的 onmouseover 事件。

最佳答案

您可以使用 jQuery 监听 window 加载事件,然后在所有媒体完全加载时在输入上创建 mouseover 监听器:

$(window).on("load", function() {
    $("#search").on("mouseover", function() {
        populate("country");
    });
});

您甚至可以使用document.ready来代替window.load。第一个甚至会等到所有其他内容(例如图像)加载完毕。最后只会等到 DOM 完成...

// $(function() {}) is a shorthand for $(document).ready(function() {});
$(function() {
    $("#search").on("mouseover", function() {
        populate("country");
    });
});

关于javascript - 当 html 中 DOM 完全加载时使用元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38565509/

相关文章:

javascript - "closest()"在其他情况下不工作

javascript - 主键整数返回在查找时递增

javascript - 使用 window.location.href 将参数传递给 MVC ActionResult

jquery - 在jquery中滑动div

html - 使用 div 使表格拉伸(stretch)

javascript - Jquery 绑定(bind)事件

javascript - 如何动态绑定(bind)ajax数据中的jquery静态数据

javascript - 使用 JqGrid 分组时数据无法正确显示

填写输入时javascript自动格式化

html - Angular 5 - 使用 InnerHtml 绑定(bind)组件选择器