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()（resp。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隐藏不需要的部分。这有很多优点：更少的服务器负载，更好的用户体验，......

此外，如果这样做，迭代MySQL结果的PHP会更具可读性：

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

如何访问php生成的导航

1 个答案: