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

We have two pages: index.html and page.html . When we are on the index.html page, we press the button and the menu works with a bang! When we are on page.html we load $(".test").load("index.html .menu") into the text block of the menu, slideToggle() does not work! What is the problem?

  • You have no working example. $(".test") - where is this element? He is not. load("index.html .menu") is a file or selector in your quotes? It can not be both at the same time - Crantisz
  • I do not have a second page where there is a test div, there is a load from the index file, and a menu block podgr. - Admiral
  • Do you want to download part of the index.html file? And why did you decide that this is possible? And most importantly, where did you find that it should work like this: load("index.html .menu") ? - Crantisz
  • So everything works for me! The menu from index.html is loaded on the page.html page, but slideToggle () doesn't work - Admiral
  • Yes. Indeed, I missed such a functional, sorry - Crantisz

1 answer 1

Since the element is replaced by another, event handlers disappear.

Try the following instead of assigning it to the element itself:

 $( "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>

or install an event handler after loading the menu:

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

  • Thank you option 1 worked! - Admiral
  • Our site is different from social networks. It helps to solve applied problems. Therefore, we use comments only on the case - to clarify the problem, to give constructive criticism or add useful information. To thank the author of the answer, vote for the answer or mark it as a decision. ru.stackoverflow.com/help/someone-answers - Crantisz