ajax menu content will not toggle?
Hello,
I have a menu that grabs content via ajax and json. This menu has 3 levels. I can click on the first level and it loads fine. This is the .cat class that then toggles. However when I click on the 2nd level link, the .ahref class it does not fire. Any ideas?
-
$(document).ready(function(){
$('.cat',this).toggle(
function () {
var id = $(this).attr('href');
if($('.box'+id).text() == '') {
var rand = '?random=' + Math.random();
$.getJSON('mclicks.php'+rand,{id:id},function(data){
$.each(data, function(i,item){
$.each(item, function(intIndex, objValue) {
// console.log(this);
$("div.box"+id).append("<a class='ahref' href='" + intIndex + "'>" + objValue + "</a> <div class='sub" + intIndex + " data'></div><br /> ");
});
$("div.box"+id).addClass("data").slideDown(100);
});
});
// $(this).html("Hide Clicks");
} else {
// $(this).html('Hide Clicks');
$('.box'+id).slideDown(100);
}
},
function () {
var id = $(this).attr('href');
//$(this).html('View Clicks');
$('.box'+id).slideUp(100);
}
);
some more code then ....
$('.ahref',this).toggle(
function () {
var id = $(this).attr('href');
console.log(id);
this is the first level code ....
-
<a href="3" class="cat">Automotive</a><br><div class="box3"></div>
<a href="39" class="cat">Housing</a><br><div class="box39"></div>
then when click this is the second level code, it should then log the id to the console, but it does not....
-
<div class="box3 data" style="display: block;">
<a class="ahref" href="229">Auto Parts Stores & Tires</a>
<div class="sub229 data"/>
<br/>
<a class="ahref" href="24">Car & Truck Rental</a>
<div class="sub24 data"/>
<br/>
<a class="ahref" href="22">Car Dealers - New</a>
<div class="sub22 data"/>
<br/>
<a class="ahref" href="23">Car Dealers - Used</a>
<div class="sub23 data"/>
<br/>
<a class="ahref" href="25">Car Repair & Service</a>
<div class="sub25 data"/>
<br/>
<a class="ahref" href="26">Car Towing</a>
<div class="sub26 data"/>
<br/>
<a class="ahref" href="27">Car Washes</a>
<div class="sub27 data"/>
<br/>
<a class="ahref" href="230">Detailing</a>
<div class="sub230 data"/>
<br/>
<a class="ahref" href="67">Gas Stations</a>
<div class="sub67 data"/>
<br/>
</div>