jquery .load（）和访问主机页面的脚本

Question

I've read through a few posts here regarding this topic, but none seem to answer which method is the best for allowing sub-pages access to the host page's <script> section.

I load home.php, which has a menu displayed in one of its two <div> sections. The HTML for this menu is on home.php itself. The user is able to interact with buttons and dropdowns in the menu portion of home.php through scripts on home.php, like:

$("#graphsButton").click(function() {  
  if($(this).text()=="Graphs") {
    $(this).html("<span><i class='fa fa-check-circle checked'></i> Graphs</span>");
    graph = true;
  } else {
    $(this).html("<span>Graphs</span>");
    graph = false;
  }   
});

After the user performs their initial operations, that larger menu is replaced by a smaller menu to provide the user more screen real-estate, using the following code:

function shrinkMenu() {

  $('#search').html('');
  $('#search').animate({
    width: '4%'
  }, 500);
  $('#returnMain').animate({
    width: '96%'
  }, 500);
  $('#search').load('smallMenu.php');
}

If the user wants the big menu back, on smallMenu.php I then have another <script> section with this code:

$('#growMenu').click(function () {
  $('#search').html('');
  $('#search').animate({
    width: '20%'
  }, 500);
  $('#returnMain').animate({
    width: '80%'
  }, 500);
  $('#search').load('largeMenu.php');    
});

largeMenu.php contains a duplicate copy of the original HTML for the menu that loaded along with home.php, and visually, it looks exactly the same to the user.

As I toggle between large menu and small menu however, the <script> sections contained in home.php that pertain to the id tags in the original menu HTML that loaded with home.php no longer work.

In order to make it work, it seems that I would have to re-initialize all my plugins on each page load, and maintain 3 separate pages' <script> sections that are all duplicates of one another, and this seems very inefficient and probably not the best way to go about this.

Is there a better way for me to achieve the functionality I am trying to code here?

Update

My code looks like this at a high level:

<div class="searchParent" id="search">
  <div class="return"></div>
  <div class="menu">
    <div class="largeMenu" id="largeMenu"></div>
  </div>
</div>

Answer 1

What you are doing is fine by replacing the menu from a php file that contains a "partial view" which is your menu HTML. The partial view relies upon the parent page code, so you don't need to duplicate any code from the parent script into the partial view. The partial view can expect there is script code on the parent page it can be used with.

As I toggle between large menu and small menu however, the sections contained in home.php that pertain to the id tags in the original menu HTML that loaded with home.php no longer work.

The problem you are having though is that you need to ensure that the code on home.php that references these menus uses a parent container as its reference point instead of direct IDs. You are replacing elements (menus), so the bindings are lost when you do that unless you bind on a parent higher up the DOM that doesn't get replaced (remember that events bubble up).

From what I see in your code snippets, it looks like the menu is loaded into the #search container. So just ensure the code in home.php uses that container as the reference point, using something like on like this:

$('#search').on('click', '#graphsButton', function() {
    // ...
});