2011-10-12 50 views
0

网站上有一个div框,并有一个链接。我想点击的容器,以触发如何触发div如<a>

<a href="#">sapien sed</a> 

但是当我点击div容器,它没有给出回应,或者是在无限循环。 我该如何解决这个问题? 也就是说;我想点击div来触发<a>

整个代码:

<div class="container"> 
    <h2>Lorem ipsum dolor sit amet</h2> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue molestie venenatis. 
     In adipiscing vulputate sem. Suspendisse potenti. Vestibulum nisl nibh, interdum sit amet pulvinar at, 
     malesuada vitae lacus. Aliquam semper <a href="#">sapien sed</a> risus laoreet ultrices. Donec volutpat felis eu justo 
     bibendum tempus. Donec non purus sed sapien fringilla tempor ut et metus. Nulla ipsum nibh, dapibus 
     ac ornare vitae, fermentum nec nulla. 
    </p> 
</div> 

<script type="text/javascript"> 
    $(function(){ 
     $("div.container").each(function(){ 
      var $container = $(this); 
      $container.find("a:first").each(function(){ 
       var $link = $(this); 
       $container 
        .css("cursor", "pointer") 
        .click(function(e){ 
         $link.trigger("click"); 
         return false; 
        }); 
       $link.bind("click", function(e){ 
        e.stopPropagation(); 
        return true; 
       }); 
      }); 
     }); 
    }) 
</script> 
+3

看来工作对我说:http://jsfiddle.net/interdream/5bfN9/ –

+1

无法真的明白你在这里做什么。你能解释一下你想要发生什么吗? – Rob

+0

当我点击链接,它的工作原理,但我想点击div触发。但它不起作用 –

回答

3

的问题是,你希望trigger("click")导致出现该链接的默认行为(即您所期待应遵循的链接和页面它链接到加载)。但是,这不是trigger所做的。它所做的就是执行绑定到元素的click事件处理函数。

要真正按照链接,你可以抢href和使用window.location

$link.bind("click", function(e){ 
    window.location = $link.attr("href"); 
    e.stopPropagation(); 
    return true; 
}); 

这里是一个updated fiddle

+0

感谢您的线索 –

+0

我解决了问题,以下解决方案: $ this.bind( “点击”,功能(E){VAR 的href = $(本)。attr(“href”)||空值; if(href){window.location = $(this).attr(“href”); } e.stopPropagation(); 返回true; }); 有时可以onclick但不是href,所以我这样做。 –

-1
$("div.container").click(function() 
{ 
    $('a:first', $(this)).click(); 
}); 
+0

除非必要,否则不应使用':first'。 – vzwick

+0

这与触发器相同,请参阅James Allardice的答案。 –

-1

确保,添加

$(document).ready(function() { }); 

的内部功能,否则股利可能无法加载在代码运行之前。

+1

这个代码已经在'$(function(){...}'里面了,它和'$(document).ready'是一样的 –

0
$(document).ready(function(){ 
    $('div.container').css("cursor", "pointer").click(function(){ 
     window.location = $('a', this).first().attr('href'); 
    }); 
}); 
+0

这和触发器一样,请看James Allardice的答案 –

+0

更新了,merci 。 – vzwick

1

要在同一时间用onclick事件非标准的“href”链接和链接:

$(function() { 
    $("div.container").each(function(){ 
     var $container = $(this); 
     $container.find("a:first").each(function(){ 
      var $this = $(this), 
       onClick = this.onclick || null; 
      $container 
       .css("cursor", "pointer") 
       .click(function(e){ 
        $link.trigger("click"); 
        return false; 
       }); 
      $link.bind("click", function(e){ 
       if (!onClick) { 
        window.location = $(this).attr("href"); 
       } 
       e.stopPropagation(); 
       return true; 
      }); 
     }); 
    }); 
})