Edit Question - KnowledgeHub

Title Body

I am having trouble getting an .on 'click' function to work upon AJAX loaded content. I have worked with the jquery .live before but this is the first time with .on and understand it works in the exact same way so unsure why I am having problems. Below is the HTML that gives the element to which you click on <h1>Press &amp; Media</h1> <div id="back"></div> <div id="overlay-content"> <span id="edocs" class="tab"></span> <span id="news" class="tab"></span> <span id="partners" class="tab"></span> </div> Below is the function that loads the AJAX content. $("#overlay-content").on('click','#news',function() { var active = 1; $("#loading").show(); $("#overlay-content").fadeOut(1000, function() { $.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) { $("#loading").hide(400); $("#overlay-content").empty().append(data).fadeIn(1000); }); }); }); This should load the following HTML <div id="news-left-panel"> <h4>News Section</h4> <ul> <li id="newsID2" class="newsYear"> <p>2012</p> <ul class="newsMonths" style="display:none"> <li>Jan <ul class="newsArticles" style="display:none"> <li onClick="newsID(2)">test</li> </ul> </li> <li>Feb</li> <li>Mar</li> </ul> </li> <li id="newsID1" class="newsYear"> <p>2011</p>

Tags (comma-separated) Cancel