Блог

Главная - Вопросы по программированию - Как мне применить загруженный javascript и css к содержимому .load()?

Как мне применить загруженный javascript и css к содержимому .load()?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я загружаю содержимое .html с помощью jquery .load(), но javascript и css не применяются к one.html/two.html после того, как оно загружено функцией .load().

Пример ниже: 

 <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>

Я понимаю, что one.html/two.html загружается после того, как стили и javascript загружаются браузером, но как я получаю стили и javascript, которые есть в <head> , для применения к вновь загруженному one.html/two.html ?

Я новичок в jQuery, поэтому дайте мне знать, как я могу уточнить, если это необходимо. Спасибо!

ОТРЕДАКТИРОВАНО Спасибо всем за предоставленные ответы! Обновил пример кода, чтобы прояснить, что я имел в виду.

копирование <style> и <script> в one.html и two.html работает, но если я загружу javascript дважды, это может привести к конфликту. например, наличие логики, которая выполняет поиск в $(document), и функций, которые сворачивают и разворачивают раздел, может вызываться несколько раз. Возможно ли, чтобы js и css, которые были загружены на главной странице, работали с недавно загруженными файлами .html или есть какой-либо чистый и ПОНЯТНЫЙ способ сделать это?

Комментарии:

1. каково содержимое content.html

2. смотрите plnkr.co/edit/7bYF2ynE92X0as6lsqCh?p=preview

3. можете ли вы также опубликовать свой код на js и css?

4. спасибо arun, это работает, но возникли проблемы, когда несколько сценариев были скопированы из загруженных html-файлов, что вызвало проблемы / конфликт со сценариями в исходном основном HTML-файле. я обновил свой вопрос. Спасибо!

5. Что касается сохранения его в чистоте — вы могли бы заставить Javascript применяться только к определенным объектам вместо использования $(document) селектора, вы также могли бы установить какой-нибудь файл COOKIE или переменную сеанса на стороне сервера, чтобы указать, что вы не хотите запускать определенный скрипт, потому что он уже был запущен… Локальное хранилище — еще лучший способ… Я думаю, вы можете проверить, существует ли функция уже в условном операторе

Ответ №1:

Как предложил Arun P Johny в своем комментарии

Вы просто вставляете свой CSS-код в целевой документ, и он будет автоматически загружен вместе с содержимым.

Ответ №2:

Вы можете написать 

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

Это будет работать для всех тегов с 'Classname' , которые уже присутствуют или динамически добавлены позже.