Проблема с SlideToggle когда используем load

334

23 января 2017, 20:22

$(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() не работает! В чем проблема?

Answer 1

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

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

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