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

Question

I am using the following code snippet from John Morris to investigate how Ajax might work for dynamically updating my menu:

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

I also have this html code:

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

which I would like to dynamically replace with this code when object 2 is clicked (to change the class of the selected hyperlink) - there is simlar code in object3.php and 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>

Everything works well on my first click of object 2, but subsequent clicks of other links will not update the navbar. I think this is related to bindings but I can not figure out what needs to be done to fix this. All suggestions appreciated.

Answer 1

Since you are overwriting the links inside #navbar_content, you need to use event delegation - see https://learn.jquery.com/events/event-delegation/

So instead of binding to

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

you need to bind to your container and use event propagation. Try with something like -

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