Dynamically update a navbar using Ajax and PHP - 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">object1</li>
<li></li>
<li></li>
<li></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>object1</li>
<li class="active"></li>
<li></li>
<li></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>