How to manipulate html from a jQuery load() with javascript

Question

I am loading an HTML file into another HTML file using the jQuery load() method:

$("#sidebar").load("templates/sidebar.html");

<div id="sidebar"></div>

I have some javascript I would like to run on the loaded HTML file. This script isn't working, I believe due to the fact that it is unable to see the new HTML at the time of it's execution. For example, this line of jQuery would be unable to see my class of menu that exists within sidebar.html.

$('.menu').css('left', '100');

Is there any way I can force the script to wait until my loaded HTML is rendered before executing?

You can pass a callback function to .load() and that function will be called when the content has been added to the DOM. — Pointy
– Pointy, Commented May 10, 2017 at 20:15

jsmith · Accepted Answer · 2017-05-10 20:18:58Z

2

You can pass a function as an additional parameter to the .load() call and it will be executed at the end of the .load() call after the new elements are added into the DOM

$("#sidebar").load("templates/sidebar.html", function () { 
    $('.menu').css('left', '100');
});

<div id="sidebar"></div>

answered May 10, 2017 at 20:18

jsmith

9768 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to manipulate html from a jQuery load() with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related