0

$(document).ready(function() {
  $("button").on("click", function() {
    $(".menu ul").slideToggle();
  });
  /*Подгрузка на другую страницу*/
  $(".test").load("index.html .menu")
});
.menu ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <button>Menu</button>
  <ul>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
  </ul>
</div>

У нас есть две страницы: index.html и page.html. Когда мы находимся на странице index.html, нажимаем на кнопку и меню работает на ура! Когда мы находимся на page.html мы делаем подгрузку $(".test").load("index.html .menu") в блок текста меню, то slideToggle() не работает! В чем проблема?

6
  • У вас не рабочий пример. $(".test") - где этот элемент? Его нет. load("index.html .menu") - это файл или селектор у вас в кавычках? Не может быть чтобы оба одновременно
    – Crantisz
    22 янв 2017 в 11:37
  • у меня нету второй страницы где есть див test, туда идет подгрузка из файла index , а блок меню подгр.
    – Admiral
    22 янв 2017 в 12:10
  • Вы хотите загрузить часть файла index.html? А с чего вы решили, что это возможно? И самое главное, где вы нашли, что это должно так работать: load("index.html .menu")?
    – Crantisz
    22 янв 2017 в 12:21
  • Так у меня все работает !Тоесть меню из index.html загружаеться на страницу page.html , но не работает slideToggle()
    – Admiral
    22 янв 2017 в 12:25
  • Да. действительно, упустил такой функционал, извините
    – Crantisz
    22 янв 2017 в 12:27

1 ответ 1

0

Поскольку элемент заменяется другим, то обработчики события пропадают.

Попробуйте следующее, вместо того чтобы назначать на сам элемент:

$( "body" ).on( "click", "button", function() {
  //здесь ваш код 
});

$(document).ready(function() {
  $("body").on("click", "button", function() {
    $(".menu ul").slideToggle();
  });
  /*Подгрузка на другую страницу*/
  $(".test").load("index.html .menu")
});
.menu ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <button>Menu</button>
  <ul>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
  </ul>
</div>

или установите обработчик события после загрузки меню:

$(document).ready(function() {

  /*Подгрузка на другую страницу*/
  $(".test").load("index.html .menu", function() {
    $("button").on("click", function() {
      $(".menu ul").slideToggle();
    });
  })
});
.menu ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <button>Menu</button>
  <ul>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
    <li><a href="page.html">Page</a>
    </li>
  </ul>
</div>

2
  • Спасибо 1 вариант сработал!
    – Admiral
    22 янв 2017 в 12:44
  • Наш сайт отличается от социальных сетей. Он помогает решать прикладные задачи. Поэтому мы используем комментарии только по делу — уточнить проблему, дать конструктивную критику или добавить полезную информацию. Чтобы поблагодарить автора ответа, проголосуйте за ответ или отметьте его как решение. ru.stackoverflow.com/help/someone-answers
    – Crantisz
    22 янв 2017 в 12:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.