Click event is fired when clicking on a sibling element

Question

Here is the 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>

Here is the jQuery code:

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

It should only fire the event on the "a" click, however it fired whenever I click anything.

Answer 1

Try removing this, which seems to bind a click on the image to a click on the A tag:

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