jQuery如何在div中设置点击href？答案

【问题标题】：jQuery how to set click on href in the div?jQuery如何在div中设置点击href？
【发布时间】：2010-05-18 08:30:09
【问题描述】：

早安，

我想在我的 div 容器中的每个锚元素上设置点击事件。这是我想做的一个例子：

---HTML---
<div id="my-container">
    <a href="page1.html">page1</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
</div>

---- jQuery ----
$("#my-container a").click(function() {
    var link = $(this).attr("href");
    $("#my-container").load(link);
});

我想做的是让我处理 href 点击的加载事件并将其加载到同一个容器中。这必须没有 id, class 属性，这些属性不适用于那些 href。问题在于：$("#my-container a")。任何帮助，将不胜感激！谢谢

更新

人们似乎不明白我想问的问题。我再重复一遍。 $("#my-container a")

【问题讨论】：

您的页面中是否包含 jquery 文件？
是的，所有其他 jQuery 函数都可以正常工作。我猜想在事件处理程序设置时 jQuery 看不到这些锚元素。也许是因为它们稍后被加载到dom？但是我尝试了 $.live 函数，它应该可以解决这个问题。没什么……
对于不确定事件是否正在设置的未来磨难，我强烈建议使用视觉事件：sprymedia.co.uk/article/Visual+Event+2。这将在页面上显示所有附加的 javascript 函数。

标签： javascript jquery html dom

【解决方案1】：

试试这个，不确定你是否遗漏了任何标签，所以我把整个东西都放进去了：

<script type="text/javascript">
     $(document).ready(function(){
        $("#my-container a").click(function(event) {
            alert('test');
            var link = $(this).attr("href");
            $("#my-container").load(link);

            event.preventDefault();
        });
     });

</script>

【讨论】：

【解决方案2】：

您忘记引用 href 字符串文字：

var link = $(this).attr("href");
                        ^    ^

此外，您还需要取消点击事件的默认行为。目前，您的事件处理程序会触发，但您不会看到结果，因为浏览器会继续跟踪您单击的链接。添加return false;作为事件处理函数的最后一行来取消这个行为。

【讨论】：

修复了这个问题，但这是因为我为这个问题快速编写了这个简单的示例。但主要问题不在这个:)
@faya：查看我的更新（或任何其他似乎也指出缺少return false 的答案）。
问题在于在容器内的锚点上设置事件处理程序:)
@faya：进行了两次更正后，它在我的机器上运行良好。问题出在代码的其他地方。开始逐行挑选它，找出罪魁祸首。

【解决方案3】：

添加return false;。

$("#my-container a").click(function() {
    var link = $(this).attr("href");
    $("#my-container").load(link);
    return false;
});

【讨论】：

【解决方案4】：

你可以这样做：

$(function(){
    $("#my-container > a").click(function() {
        var link = $(this).attr('href');
        $('#my-container').load(link);
        return false;
    });
});

但是，如果您的意思是您不想给div 任何id 或class，那么其中包含链接的任何div 也会受到影响。因此，您至少应该将id 提供给您要加载内容的div。

【讨论】：

我的意思是锚点没有 id 或 class 属性。这是因为我的分页框架不允许我自动将 id 或 class 属性添加到生成的锚点。如您所见， div 具有 id 属性。
我没有收到任何错误。我为测试设置了 $("#my-container > a").click(function() { alert('test')});。我单击链接并且警报没有被调用。据我所知，这意味着未设置点击事件。我也尝试过使用 $.live，但似乎是一样的......
@faya: 确保你已经包含了 jquery 文件并且路径是正确的。

【解决方案5】：

你用bind函数试过了吗：

$("#my-container a").bind("click", function() {
    var link = $(this).attr("href");
    $("#my-container").load(link); 
});

【讨论】：