Question

我正在使用John Morris的以下代码片段来研究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中有simlar代码：

<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>

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

1 个答案: