单击同级元素时会触发 Click 事件

Question

这是 HTML：

<div class="categories">
    <h3>
        <img src="http://i.imgur.com/TThAk.gif" />   
        <a href="/foo">Foo</a>
        <p class="subtext">heading</p>
    </h3>
    <div>
        <ul>
            <li>some li here.</li>
        </ul>
    </div>    
</div>

这里是 jQuery 代码：

<script type="text/javascript">
    $(document).ready(function () {
        var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
            plusImgUrl = "http://i.imgur.com/TThAk.gif";

        $('.categories').accordion({
            active: false,
            autoHeight: false,
            fillSpace: false,
            collapsible: true,
            changestart: function (event, ui) {
                $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
                ui.newHeader.find("img").attr("src", minusImgUrl);
                ui.oldHeader.find("img").attr("src", plusImgUrl);
            }
        });

        $('.categories h3 img').click(function () {
            $(this).next().click();
        });

        //This is the bad one!
        $('.categories h3 a').click(function() {
            window.location = $(this).attr("href");
        });
    });
</script>

它应该只在“a”点击时触发事件，但是当我点击任何东西时它都会触发。

Answer 1

尝试删除这个，它似乎将点击图像绑定到点击 A 标签：

    $('.categories h3 img').click(function () {
        $(this).next().click();
    });