Use elements when DOM is fully loaded in html

Question

I want my child elements of body tag to be used when document is fully loaded. like I have

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

In the input element, i am using onmouseover event to call javascript function. But I want that thing to be enabled when all element are fully loaded.

Up till now, I have seen online that there is an onload event that can be used in body tag to call any particular function. But I don't want to call any function on onload event, just want to make sure that onmouseover event of input element should fired when body is fully loaded.

Try $(document).ready(function(){ }); function instead..

Karthikeyan
– Karthikeyan

2016-07-25 10:40:21 +00:00
Commented Jul 25, 2016 at 10:40 — Karthikeyan
– Karthikeyan, Commented Jul 25, 2016 at 10:40

eisbehr · Accepted Answer · 2016-07-25 10:45:32Z

You can use jQuery to listen on the window load event and then create your mouseover listener on the input whenever all media is fully loaded:

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

Instead of window.load you could even use document.ready. The first will even wait until all other things, like images, are loaded. The last will only wait until the DOM is finished ...

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

what if I want to make all elements, not to be used before window loaded. Elements can be any, having any event (rather than just mouseover).
That belongs to your actual project. One quick idea could be to hide the body by default and just show them whenever the page load has been finished. But as I said, that belong to your project. In general I don't see why you have to wait until load. That is a special case ...

Haresh Vidja · Accepted Answer · 2016-07-25 10:40:16Z

you can use jQuery for this

Your HTML code

<body> Country: <br> <div> <datalist id="country"></datalist> <input type="text" list="country" id="search" /> </div> </body>

in you javascript code

$(document).ready(function(){ $("#search").hover(function(){ populate('country'); }); });

Note that hover() is not the same as a mouseover event - it's a mouseenter and mouseleave combined

Shubham Khatri · Accepted Answer · 2016-07-25 10:40:34Z

In jquery use the

$(document).ready(function(){ $('#search').on('mouseenter', function(){ console.log('mouse over'); }) })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Country: <br> <div> <datalist id="country"></datalist> <input type="text" list="country" id="search" /> </div>

Collectives™ on Stack Overflow

Use elements when DOM is fully loaded in html

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related