How do I apply loaded javascript and css to .load() content?

Question

I am loading .html content with jquery .load() but the javascript and css is not applied to the one.html/two.html after it is loaded by the .load() function.

Example below:

<head>
    <style> styles1 </style>
    <link href="stylesheets/style2.css" rel="stylesheet">
    <script src="script1.js">
    <script>     
        $(document).ready(function(){
           $("button.os").click(function(){
              fillmein = $(this).attr("target");
              fillmeinfile = $(this).attr("target")+'.html';
              $("."+fillmein).load("/contentfolder/"+fillmeinfile);
           });
        });

     ...
     other scripts
     ...
    </script>
</head>

<body>
   <p>the css and any js is applied to this block</p>
   <button class="os" target="one">replace</button>
   <div class="one">I will be replaced by one.html</div>
   <button class="os" target="two">replace</button>
   <div class="two">I will be replaced by two.html</div>
</body>

I understand that the one.html/two.html is loaded after the styles and javascript is loaded by the browser but how I get the styles and javascript that is in the <head> to apply to the newly loaded one.html/two.html?

I new to jQuery so let me know how I clarify if needed. thanks!

EDITED Thanks for providing answers everyone! Updated the code example to clarify what I meant.

copying the <style> and <script> into the one.html and two.html works but if I load the javascript twice it could conflict. for example, having logic that searches $(document), and functions that collapse and expand a section can be called multiple times. Is it possible to have the js and css that was loaded in the main page work on the newly loaded .html files or is there any clean and DRY way to do this?

thanks arun, that works but ran into issues when multiple scrips were copied over from the loaded .html files which caused problems/conflicting with the scripts in the original main html file. i updated my question. thanks! — Boboyum
– Boboyum, Commented Oct 21, 2016 at 4:45
As far as keeping it clean and dry -- you could have the Javascript apply only to specific objects instead of using the $(document) selector You could also set some kind of COOKIE or server-side session var to indicate that you dont want to run a specific script because it has already been run... Local Storage is an even better way... I think you can check if a function already exists as well in a conditional statement — mike510a
– mike510a, Commented Oct 22, 2016 at 1:00

mike510a · Accepted Answer · 2016-10-21 03:51:39Z

1

As suggested by Arun P Johny in his comment

You simply put your CSS inline on the target document and it will be automatically loaded along with the content.

answered Oct 21, 2016 at 3:51

mike510a

2,1881 gold badge15 silver badges29 bronze badges

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

Comments

Pritish Vaidya · Accepted Answer · 2016-10-21 03:42:27Z

0

You can write

$('button').on('click','Classname',function(){
  //write your structure here
  })

This will work for all tags with 'Classname',which are already present or dyanamically added later on.

answered Oct 21, 2016 at 3:42

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

Collectives™ on Stack Overflow

How do I apply loaded javascript and css to .load() content?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related