更新

Question

我已经阅读了一些关于此主题的帖子，但似乎没有人回答哪种方法最适合允许子页面访问主页的<script>部分。< / p>

我加载了home.php，其中有两个<div>部分之一显示了一个菜单。此菜单的HTML位于home.php本身。用户可以通过home.php上的脚本与home.php的菜单部分中的按钮和下拉菜单进行互动，例如：

$("#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;
  }   
});

用户执行初始操作后，使用以下代码将较大的菜单替换为较小的菜单，为用户提供更多的屏幕空间：

function shrinkMenu() {

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

如果用户想要返回大菜单，请在smallMenu.php上找到另一个<script>部分，其中包含以下代码：

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

largeMenu.php包含与home.php一起加载的菜单的原始HTML的副本，在视觉上，它看起来与用户完全相同。

当我在大菜单和小菜单之间切换时，<script>中包含的home.php部分与原始菜单中的id标记相关加载home.php的内容不再有效。

为了使它工作，似乎我必须在每个页面加载时重新初始化我的所有插件，并维护3个单独的页面＆＃39; <script>部分彼此重复，这似乎非常低效，可能不是解决此问题的最佳方式。

我是否有更好的方法来实现我在此处编写的功能？

更新

我的代码在高级别看起来像这样：

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

Answer 1

通过从包含“部分视图”（即菜单HTML）的php文件替换菜单，您正在做的事情很好。部分视图依赖于父页面代码，因此您无需将父脚本中的任何代码复制到局部视图中。部分视图可以预期父页面上可以使用脚本代码。

当我在大菜单和小菜单之间切换时， home.php中包含的与属性中的id标签相关的部分加载home.php的原始菜单HTML不再有效。

您遇到的问题是，您需要确保引用这些菜单的home.php上的代码使用父容器作为其参考点而不是直接ID。您正在替换元素（菜单），因此当您这样做时绑定会丢失，除非您绑定在未被替换的DOM上方的父级（请记住事件冒泡）。

从我在代码片段中看到的内容看起来，菜单已加载到#search容器中。因此，请确保home.php中的代码使用该容器作为参考点，使用类似on之类的内容：

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

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

更新

1 个答案: