Как использовать javascript из содержимого, загруженного AJAX?

Question

Я много исследовал в других вопросах и в Google, и до сих пор ничего не сработало. У меня есть опыт работы с JavaScript/jQuery, и я считаю, что я свободно говорю на PHP.

Я разрабатываю приложение для работы, которое использует jQuery для загрузки страниц из меню навигации. Вот настройки этого элемента до сих пор:

<menu> 
    <button value="home">HOME</button> 
    <button value="process_sheets">PROCESS SHEETS</button> 
    <button value="admin">ADMINISTRATION</button> 
    <button value="faq">FAQ</button> 
    <div id="search-container"></div> 
</menu> 

<script> 

$("menu button").each(function() { 
    $(this).on("click", function() { 
     $.get(null, { 
      page: $(this).val() 
     }, function(data) { 
      $("article#content").html($.parseHTML(data)); 
     }, 'html'); 
    }); 
}); 

</script> 

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

Вот код аккордеон:

$(function($) { 
    $('#accordion').find('.accordion-toggle').on('click', function(){ 
     $(this).next().slideToggle('fast'); 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 
    }); 
}); 

<h2>Process Sheets</h2> 
<div id="process-sheets-accordion"> 
    <h4 class="accordion-toggle">GE</h4> 
    <div class="accordion-content"> 
<?php include 'static_section_form.php'; ?> 
    </div> 
    <h4 class="accordion-toggle">5"</h4> 
    <div class="accordion-content"> 
    <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
    </div> 
    etc... 
</div> 

Answer 1

Если код в вопросе на самом деле в тексте возвращенного АЯКС вызова, проблема заключается в том, что не получает выполняется при загрузке через get, а затем проанализируйте его и добавьте его на страницу.

JQuery имеет функцию, специально разработанные для делать именно это, хотя: load:

$("menu button").each(function() { 
    $(this).on("click", function() { 
     $("article#content").load(null, {page: $(this).val()}); 
    }); 
}); 

load будет извлекать страницы с помощью Ajax, извлечь сценарии из него, положить содержимое в элемент, а затем выполнить скрипты.

выше будет использовать POST, потому что мы передаем объект в качестве второго аргумента, но, как вы используете GET, мы должны просто добавить page к URL-адресу:

$("article#content").load(location.pathname + "?page=" + encodeURIComponent($(this).val())); 

... или передавая его в виде строки:

$("article#content").load(location.pathname, "page=" + encodeURIComponent($(this).val())); 

Если вы не предоставите объект данных, load по умолчанию для GET вместо POST.

---

Примечание стороны: Я никогда не видел null как URL для $.get ранее. Я скопировал его на вызов load, но я не думаю, что null действителен (в любом месте), так как в документации нет ничего, что могло бы быть чем угодно, кроме строки. Используйте фактический URL-адрес, например location.pathname, который я использовал в примере GET выше.

Answer 2

Вот рабочий фрагмент кода, который делает именно так, как я предполагал:

$("menu button").each(function() { 
    $(this).on("click", function() { 
     $("#content").load(window.location.pathname + "?page=" + encodeURIComponent($(this).val())); 
    }); 
});