Question

网站上有一个div框，有一个链接。我想点击容器才能触发

<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>

Answer 1

问题是您期望trigger("click")导致链接的默认行为发生（即您希望跟踪链接并加载链接的页面）。但是，这不是trigger所做的。它所做的只是执行绑定到元素的click事件处理函数。

要真正关注该链接，您可以抓住href并使用window.location：

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

这是一个updated fiddle。

Answer 2

同时触发与onClick事件的标准“超链接和链接：

$(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;
            });
        });
    });
})

Answer 3

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

Answer 4

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

Answer 5

确保在

中添加功能

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

否则在代码运行之前可能无法加载div。

如何触发像<a></a>这样的div

5 个答案: