使用 Ajax 和 PHP 动态更新导航栏

Question

我正在使用来自 John Morris 的以下代码 sn-p 来研究 Ajax 如何用于动态更新我的菜单：

<script>
  $(document).ready(function(){
    var trigger = $('#bs-example-navbar-collapse-1 ul li a'),
    container = $('#navbar_content');

    trigger.on('click', function(){
      var $this = $(this), target = $this.data('target');
      container.load(target + '.php');
      return false;
    });
  });
</script>

我也有这个html代码：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav" id='navbar_content'>
    <li class="active"><a href="#" data-target="object1">object1</a></li>
    <li><a href="#" data-target="object2"></a></li>
    <li><a href="#" data-target="object3"></a></li>
    <li><a href="#" data-target="object4"></a></li>
  </ul>
</div>

我想在单击对象 2 时用此代码动态替换（以更改所选超链接的类） - object3.php 和 object4.php 中有类似的代码：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav" id='navbar_content'>
    <li><a href="#" data-target="object1">object1</a></li>
    <li class="active"><a href="#" data-target="object2"></a></li>
    <li><a href="#" data-target="object3"></a></li>
    <li><a href="#" data-target="object4"></a></li>
  </ul>
</div>

我第一次单击对象 2 时一切正常，但随后单击其他链接不会更新导航栏。我认为这与绑定有关，但我无法弄清楚需要做些什么来解决这个问题。所有建议都表示赞赏。

Answer 1

由于您要覆盖 #navbar_content 内的链接，因此您需要使用事件委托 - 请参阅 https://learn.jquery.com/events/event-delegation/

所以不是绑定到

var trigger = $('#bs-example-navbar-collapse-1 ul li a')

您需要绑定到您的container 并使用事件传播。尝试类似 -

<script>
  $(document).ready(function(){
    var container = $('#navbar_content');

    container.on('click', 'li a', function(){
      var $this = $(this), target = $this.data('target');
      container.load(target + '.php');
      return false;
    });
  });
</script>