Question

为什么这在IE / Chrome中不起作用，但在FF / Opera中有效？我想使锚点可以点击div，这样当你点击div时，它的行为就像点击锚点本身一样。

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function bindOnClickPostBack() {
        $(".header a").each(function () { 
            var anchor = $(this);
            var clickEvent = anchor.attr('href');
            var header = anchor.parent();
            header.css('background-color', 'yellow');
            header.attr('onclick', clickEvent);
        });
        /*$(".header").live("click", function(){
            anchor = $(this).find('a');
            var clickEvent = anchor.attr('href');
            alert(clickEvent);
            $(this).css('background-color', 'yellow');
            //header.attr('onclick', clickEvent);
            //anchor.click();
        });*/
        return false;
    }

    $(document).ready(function() {
        bindOnClickPostBack();
    });
</script>

体：

<div style="background-color:red" class="header"> <a href="alert('hello1')">Shortcut1</a></div>
<div style="background-color:red" class="header"> <a href="alert('hello2')">Shortcut2</a></div>
<div style="background-color:red" class="header"> <a href="alert('hello3')">Shortcut3</a></div>
<div style="background-color:red" class="header"> <a href="alert('hello4')">Shortcut4</a></div>

Answer 1

嗯......你为什么要那样做？如果您希望整个标题可以点击，只需制作一个大的块级锚点：

<a href="#" class="header">Big Header</a>

使用：

a.header { display: block; width: 100%; height: 50px; background: yellow; }

和

$("a.header").click(function() {
  // do stuff
  return false;
});

或者在这种情况下href就足够了。

如果确实想沿着你的路线前行（我建议反对它），你需要找出href属性中的内容。不同的浏览器可能会稍微按摩它。

绑定点击事件的更常见方式是：

$("div.header").click(function() {
  // do stuff
});

不要直接搞乱onclick属性。

或者你可以这样做：

$("div.header").click(function() {
  return $("a". this).click();
});

但是又一次：为什么不只是让锚点大到是标题，如果有必要，使它成为块级元素？

Answer 2

由于你正在使用jquery，试试这个：

$(document).ready(function() {
    $('div.header').click(function() {
       $(this).find('a').click();
    });
});

Answer 3

+1为cletus的答案，但我还会添加 - event delegation。

Answer 4

尝试做同样的事情，列表元素中的链接。要在A标记上产生单击，LI或header元素标记内部会产生“太多递归”错误。实际上，就像Cletus所说的那样，将A作为块元素而不是内联使得这笔交易成为可能。

jQuery在父级中使用子单击/属性

4 个答案: