I’m having an issue where, after dynamically attempting to load content in through AJAX, the content isn’t responsive to the JS code that it used to be.
Here’s a jsfiddle of this navigation bar working before trying to dynamically loading it using AJAX… http://jsfiddle.net/neowot/m107L4mh/ (ignore that it’s offset, lol)
But now it’s just nonresponsive. I asked for similar help before and attempted to add proper event handlers, but clearly I’m still struggling.
Please help if you can. Thank you.
init.js
$(document).ready(function() {
var nav, content, fetchAndInsert;
nav = $('nav#main');
content = $('section#content');
//Fetches and inserts content into the container
fetchAndInsert = function(href) {
$.ajax({
url: 'http://localhost/TTValid/content/' + href.split('/').pop(),
method: 'GET',
cache: false,
success: function(data){
content.html(data);
}
});
};
//User goes back/forward
$(window).on('popstate', function() {
fetchAndInsert(location.pathname);
});
nav.find('a').on('click', function(e) {
var href = $(this).attr('href');
//Manipulate history
history.pushState(null, null, href);
//Fetch and insert content
fetchAndInsert(href);
e.preventDefault();
});
});
page1.js
$(function () {
var container = $('.navbar');
$(document).on('click', '.navbar ul li a', function(event) {
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
$('.navbar ul li.gone').removeClass("gone");
$(event.target).closest("li").addClass("gone");
});
$(document).on('mouseenter', '.navbar > li', function(event) {
$(this).find('ul').removeClass('hidden');
});
$(document).on('click', '.ActiveListItem', function(event) {
$('.navbar li ul').slideToggle(300);
});
$(document).mouseup(function (e) {
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('.navbar li ul').slideUp(300);
}
});
});
page1.php
<?php
require 'views/TTheader.php';
?>
<section id="content">
<?php require 'content/TTpage1.php'; ?>
</section>
<?php
require 'views/TTfooter.php';
?>
content/page1.php
<div id="navbarcontainer">
<ul class="navbar cf">
<li>
<a href="#" class="ActiveListItem">Category</a>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Movie</a></li>
<li><a href="#">Book</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Misc</a></li>
</ul>
</li>
</ul>
</div>