使用Javascript触发器加载所有元素

Question

I have 2 external html pages loaded by this code:

<div id="header-div"></div>

<div id="footer-div"></div>

my js file contains this:

$(function () {
    $("#header-div").load("/AfekDent/header.html");
    $("#footer-div").load("/AfekDent/footer.html");
});  

I want to run a function when specific element in the header file is created - what trigger can i use for it?

It's ok the trigger will occur when all elements will be loaded.

thanks!

Answer 1

Add a callback to your load() call.

$(function () {
    $("#header-div").load("/AfekDent/header.html", function() {
        console.log('My header was loaded!');
    });
});

Answer 2

You can use a callback on the #header-div , which will execute the code after the entire header has loaded.

$("#header-div").load("AfekDent/header.html", function() {
  someFunction();
});

However, if you want to execute code after a specific element in the header loads , try something like:

$("#specific-element").on("load", function() {
  someOtherFunction();
});

If you want to learn more about the difference between load and on("load") , look at this question or read the jQuery documentation for load and on() .

For simplicity, I'd recommend executing code with $(document).ready(function() {yetAnotherFunction();}); , but it depends on your specific case.