how to access php generated navigation - php

Question

I build a navigation from a databse, where I ask for projects of different categories. So basically I have two parts of my navigation:
The first part is the naviation of the categories (culture, webdesign, etc.). If I click this, I ask my database for projects with this category and create new links with PHP:
$query="SELECT * FROM projects WHERE category=\"$category\"";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
$i=0;
while ($i < $num) {
$title=mysql_result($result,$i,"title");
$id=mysql_result($result,$i,"id");
echo "<div class=\"sublink\" data-id=\"$id\" ><a href=\"#\">$title<br />";
$i++;
}
but it seems I can't call these links from my main page with jQuery, like I did with the categories:
<div class="link" data-subsite="design"> design *</div>
$(document).ready(function(){
$('.link').click(function(){
var subsite = $(this).data('subsite');
$('#naviLeftContent').load('php/getNavi.php?category='+subsite);
});
});
Now I wanted to do more or less the same with my sub-navigation to load the specific text/title/info into the right divs. But the new generated divs from my sub-navigation don't seem to be in my source code, so the JavaScript doesn't recognize them.

Answer 1

You seem to be searching for jQuery.on() (resp. jQuery.live(), which is deprecated as of version 1.7): Attach an event handler for all elements which match the current selector, now and in the future.
EDIT: Example:
HTML:
<div id="menu">
<div id="category1">
link 1
link 2
</div>
<div id="category2"></div>
</div>
JS:
$(document).ready(function(){
// Attach click handler
$(document).on("click", "#menu a", function(){
alert("click!");
});
// Now load menu content, click handler will also work for this
$("#category2").load("content.php");
});
EDIT 2: Solution found in chat:
$('.link').click(function(){
var subsite = $(this).data('subsite');
$('#naviLeftContent').load('php/getNavi.php?category='+subsite);
});
$(document).on("click", ".sublink", function(){
var subsite = $(this).data('subsite');
$('#textContent').load('php/subsite.php?page='+subsite);
});
Don't know if I understand you correctly, but are you loading the content of your navigation via AJAX? Isn't this far too complicated? Normally, you let PHP generate the entire navigation and hide unwanted parts with CSS. This has a lot of advantages: Less server load, better user experience, ...
Besides, iterating over MySQL results in PHP is a lot more readable when done like this:
$result = mysql_query($query);
while ($row = mysql_fetch_object($result)) {
echo $row->title;
}