如何调用子锚点击父div点击答案

【问题标题】：how to call child anchor click on parent div click如何调用子锚点击父div点击
【发布时间】：2012-11-26 20:46:12
【问题描述】：

我有多个

实例

<div class="picOuterDiv">
   <a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>

<div class="picOuterDiv">
   <a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>

现在我正在使用 jQuery colorbox 插件来创建 Lightbox。当我单击锚元素时，灯箱会打开，即 iframe 类的锚元素。到这里为止都可以正常工作，使用

$(".iframe").colorbox({iframe:true, width:"646", height:"675"});

我想要的是在单击父 div 时打开颜色框。单击 div 时，我使用以下代码触发锚元素 href，但显然仅 href 是不够的，单击的元素应该具有类 "iframe" 。所以它不适用于此代码。

$('.picOuterDiv').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('a').attr('href');
        });
});

那么任何人都可以帮助我如何完成这项工作吗？我希望问题很清楚。提前谢谢你。

更新： http://jsfiddle.net/VhkFN/3/

【问题讨论】：

下面的答案，或者只是让你的锚使用 CSS 填充整个 div。
@popnoodles 你能看到 js 小提琴吗？我已经编辑了问题
查看 Christophe 的答案，尽管有 +1，但它是唯一正确的答案。他还提到了我看到的 var arr[] 仍然在你的代码中。 jsfiddle.net/VhkFN/4

标签： javascript jquery colorbox

【解决方案1】：

$('.picOuterDiv').click(function() {
   window.location.href=$(this).find('a').attr('href');
});

你的小提琴有几个问题。首先“var arr[]”不正确。其次，超链接没有任何onclick 属性，因此触发点击不会起太大作用。你需要获取它的 href 属性。

演示：http://jsfiddle.net/VhkFN/4/

【讨论】：

什么，超链接没有任何点击行为？你认为它有什么作用？
@popnoodles 我在答案中添加了一个参考，为了清楚起见，将“行为”更改为“属性”。我们在这里讨论的是 JavaScript，而不是 html。尝试其他答案以了解我的意思。
嗯.. 让我想想这个。实际上，我要尝试一下...是的，除了您之外的所有人似乎都错了。事实上，触发对子气泡的点击会反弹回来，然后触发点击...超过最大调用堆栈大小
那是我最初的方法@christophe。但是该代码的问题在于它确实遵循了链接。但不打开彩盒弹出。正如我提到的，我正在使用 jQuery colorbox 插件。
@jinni 好的，但是您获取 href 的原始代码不正确。我看到你现在已经在你的最终代码中修复了它。

【解决方案2】：

这对我有用。正如我所说，我使用的是 jquery colorbox。

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});

【讨论】：