将子元素href的点击功能绑定到父元素div

Question

<div class="parent">
   <a href="#">download link</a>
</div>


$(".parent").bind("click", function(){

alert('test');

});

我想绑定 href 点击功能，以便在单击 .parent 时，它会转到嵌套链接的位置。

- zadubz

---

请提供完整的需求。实际上你想做什么？ - Ankur Loriya

Answer 1

$(".parent").bind("click", function(){
    window.location.href = $(".parent a").attr("href");
});

- Witek

---

window.location.href = $(this).find('a').attr('href'); //这在不同的<a>链接中运行得更好 - Pradeep Kumar

Answer 2

试试这个：

$(".parent").bind("click", function(){
    alert($(this).children('a').attr('href'));
});​

- Amritpal Singh

Answer 3

如果您在父元素中只有一个链接，且链接填充了整个父元素的宽度和高度，则完全可以避免使用JavaScript，只需设置以下CSS：

.parent a {
   display: block;
   width  : 100%;  /* or set in px if parent has not width specified */
   height : 100%;  /* or set in px if parent has not height specified */
}

- Fabrizio Calderan

---

我会避免在js中做这件事，除非是在这种情况下，我有一个包含许多链接的轮播。谢谢你的建议！ - zadubz

Answer 4

尝试以下类似的代码，应该可以正常工作：

$(".parent a").bind("click", function(){
    alert('test');    
});

- Ankur Loriya

Answer 5

然后你可以这样做：

// Choose the a tag specifically
$(".parent").bind("click", function() {
    alert($(this).find('a').attr('href'));
});

那应该就可以了

祝你好运！

- Zaziffic

---

Amritpal有一个更好的版本，即children()只浏览第一级子元素。find()浏览所有级别，因此更贪婪。 - Zaziffic