如何访问php生成的导航

Question

我从一个数据库构建一个导航，在那里我要求不同类别的项目。所以基本上我的导航有两个部分：

第一部分是类别导航（文化、网页设计等）。如果我点击它，我会向我的数据库询问该类别的项目并使用 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++;
}

但我似乎无法使用 jQuery 从我的主页调用这些链接，就像我对类别所做的那样：

<div class="link" data-subsite="design"><a href="#"> design *</a></div>
$(document).ready(function(){
$('.link').click(function(){
var subsite = $(this).data('subsite');
        $('#naviLeftContent').load('php/getNavi.php?category='+subsite);
    });
});

现在我想对我的子导航做或多或少相同的操作，以将特定的文本/标题/信息加载到正确的 div 中。但是从我的子导航中新生成的 div 似乎不在我的源代码中，因此 JavaScript 无法识别它们。

Answer 1

您似乎在搜索jQuery.on()（分别为jQuery.live()，从1.7 版起已弃用）：

为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

编辑： 示例：

HTML：

<div id="menu">
    <div id="category1">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
    </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");
});

---

编辑 2： 在聊天中找到解决方案：

$('.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);
});

---

不知道我是否理解正确，但您是否通过 AJAX 加载导航内容？这不是太复杂了吗？通常，您让 PHP 生成整个导航并使用 CSS 隐藏不需要的部分。这有很多优点：更少的服务器负载，更好的用户体验，......

此外，像这样在 PHP 中迭代 MySQL 结果更具可读性：

$result = mysql_query($query);
while ($row = mysql_fetch_object($result)) {
    echo $row->title;
}