I have two click listeners on a page, one for a sub-nav (that is dynamically changing the <li> in the menu) and another for a menu (that is dynamically changing the another piece of content in another <ul>.
<nav class="sub-nav">
<ul class="nav__list"> <!-- "sub-nav__item" has click listener -->
<a id="general" class="sub-nav__item sub-nav__item--active" href="#"><li>General</li></a>
<a id="ordering" class="sub-nav__item" href="#"><li>Ordering</li></a>
<a id="payment" class="sub-nav__item" href="#"><li>Payment</li></a>
<a id="shipping" class="sub-nav__item" href="#"><li>Shipping</li></a>
<a id="receiving" class="sub-nav__item" href="#"><li>Receiving</li></a>
</ul>
</nav>
<div class="menu-holder">
<ul class="menu"> <!-- "menu__item" has click listener and changes "content-area" -->
<li class="menu__item menu__item--active" id="questions"><a href="#">Questions</a></li>
<li class="menu__item" id="customer-inquiries"><a href="#">Customer Inquiries</a></li>
</ul> <!-- menu -->
<ul class="content-area">
<li class="content-area__header">Questions</li>
<li class="content-area__item"><p>If you have questions about these policies, please feel free to contact us at any time.</p><p>With your assistance, we can provide you and all of our customers with quality service and help everyone have a successful year!</p></li>
</ul> <!-- sub menu -->
</div> <!-- menu-holder -->
The sub-nav listener works fine, my issue is that the menu listener only works when the page first loads. Once I activate the sub-nav click listener and the content changes, the menu click listeners no longer work. My javascript for the sub-nav seems to be correctly appending the class names for the menu. Each click listener is in a separate file, and each is making its own AJAX request (to the same .json file).
I am calling the $('.sub-nav__item').click(function() {..code here..}
and $('.menu__item').click(function() {..code here..} in the javascript files.
I have a hunch it has to do with something globally that is not being recognized, but I'm fairly new to javascript/jquery so just taking a shot in the dark.
Please let me know if there is anything simple I should try out off the top of your head. I will refrain from posting the JavaScript code for now -- it is rather lengthy but let me know if it will help.
Thanks! Jake
Here is the script for changing the menu base on which sub-nav__item was clicked.
$('.sub-nav__item').click(function() {
/* fade the dom out */
$('.menu-holder')
.fadeTo('.35s', '0')
.delay(100);
//console.log( "The ID is: " + $(this).attr('id') );
/* remove other active classes */
$('.sub-nav__item--active').removeClass('sub-nav__item--active');
/* Adding the active class */
$(this).addClass('sub-nav__item--active');
/* clone the grid__cell */
var gridCell = $(".menu").clone();
sleep(200); // allow the fade to occur
/* make the request */
ajaxRequest( $(this).attr('id'), gridCell );
sleep(200); // allow the request to occur before fade in
/* processing done...fade dom back in */
$('.menu-holder').fadeTo('.75s', '1');
});
/*
* This function submits the request for the JSON file for the sub-nav
*/
function ajaxRequest( reqID, gridCell ) {
console.log("Request ID: " + reqID);
var domObj = "<li class=\"menu__item\" id=\"{{itemID}}\"><a href=\"#\">{{itemLink}}</a></li>";
var domObjContent = "<li class=\"content-area__header\">{{contentHeader}}</li>"
+ "<li class=\"content-area__item\">{{contentText}}</li>";
$.ajax({
type:"GET",
url:"js/policies.json",
success: function(response) {
console.log("Request was successful.");
/* clear the grid */
$('.menu').empty();
$('.content-area').empty();
var content = [];
var firstHasBeenFound = false;
for( var i=0; i<response.data.length; i++) {
if( response.data[i].category == reqID.toString() ) {
content = response.data[i];
if( !firstHasBeenFound ) {
/* set default view */
$('.content-area').append( dom1ObjContent
.replace(/{{contentHeader}}/, content.heading)
.replace(/{{contentText}}/, content.verbiage) );
firstHasBeenFound = true;
}
/ * For Debugging purposes */
// console.log( "The Response is: "
// + content.category +
// ", " + content.heading );
/* add li to menu */
$('.menu').append( domObj
.replace(/{{itemLink}}/, content.heading)
.replace(/{{itemID}}/, content.tag) );
}
else {
console.log("At least one item did not match");
}
} /* for */
firstHasBeenFound = false; // resetting the boolean
}, /* success funct */
}); /* ajax */
console.log("AJAX Request Done.");
} /* ajaxRequest */
