How to manipulate imported HTML file using external jQuery file?

Question

I imported a html file using jquery like below,

$(".IncludeInThisDiv").load("ToBeImported.html");

My ToBeImported.html file is like below,

Now I want to change the background color of testDiv which is imported in lets say main.html file. To do so I added a js file called main.js in the project and included it in the main.html file by proper manner. And I have been written the proper jquery code to change the background color of testDiv in main .js file, But that is not working at all.

I think there is some issue with that.

Note: I can manipulate the color from browser console using same jQuery code.

Answer 1

Probably you are changing div's css before it loads completely.

Call load function with complete handler like this:

$(".IncludeInThisDiv").load("ToBeImported.html", function() {
  $(".testDiv").css("background-color","red");
});