jQuery: combining hashchange with a click function

Question

I'm having some trouble getting the hashchange function to work how I want it to. I currently have a masonry grid of divs, with a clearing div after every row (of 4), which is hidden. Clicking on one of the divs shows the closest clearing div, appends the relevant content inside it and reloads the masonry around it.
This all works fine, but as I want to link to these divs that are being show from other pages I want to attach hashes to the functions. The hashes are being added to the URL, but if you load the URL it fails to run the function and show the relevant divs.
Here's a jsfiddle: http://jsfiddle.net/EV7yg/1/

jQuery:

$(document).ready(function () {
$(window).hashchange( function(){

    $(".content-block-footer").click(function () {

        $('.content-block-preview').hide();
        var previewForThis = $(this).parent(".content-block-small").nextAll('.content-preview:first');
        var otherPreviews = $(this).parent(".content-block-small").siblings('.content-preview').not(previewForThis);
        otherPreviews
            .addClass('excluded') // exclude other previews from masonry layout
            .hide();
        previewForThis
            .removeClass('excluded')
            .append($('#content-preview' + $(this).attr('hook')).show())
            .hide()
            .delay(400)
            .fadeIn("slow");
        $('html, body').animate({ scrollTop: $(this).offset().top-95 }, 'slow');
        $('#block-wrap').masonry('reload');
    });
    });
$(window).hashchange();
});

HTML:

<div id="block-wrap">

<div class="content-block-small" style="background-color: white;">
<div class="content-block-footer" hook="01"><a href="#test01">READ MORE</a>
</div>
</div>

<div class="content-block-small" style="background-color: white;">
<div class="content-block-footer" hook="02"><a href="#test02">READ MORE</a>
</div>
</div>

<div class="content-block-small" style="background-color: white;">
<div class="content-block-footer" hook="03"><a href="#test03">READ MORE</a>
</div>
</div>

<div class="content-block-small" style="background-color: white;">
<div class="content-block-footer" hook="04"><a href="#test04">READ MORE</a>
</div>
</div>


<div class="content-preview excluded">
</div>


<div id="content-preview01" class="content-block-preview">
CONTENT GOES HERE
</div>

<div id="content-preview02" class="content-block-preview">
CONTENT GOES HERE
</div>

<div id="content-preview03" class="content-block-preview">
CONTENT GOES HERE
</div>

<div id="content-preview04" class="content-block-preview">
CONTENT GOES HERE
</div>

</div>

Is it possible to attach hashes to such click functions and link to these hashes from exterior pages (showing the relevant content)?

Answer 1

It doesn't make sense to put a click event handler into a hashchange event.

Have look at my forked fiddle:

http://jsfiddle.net/y9X2D/35/

You can check the hash handling over the following url:

http://fiddle.jshell.net/y9X2D/35/show/

I just excluded the your click event code into a seperate function. The click event now changes the url hash which fires the hashchange event. the hashchange event then calls showDetail.

Of course you can also call showDetail directly without changing the hash.

$(window).hashchange( function(){
    var hash = location.hash;
   if(hash)
   {
    var element = $('.content-block-footer[hook="'+hash.substring(1)+'"]');
     if(!element) element = $('.content-block-footer').first();
    showDetail(element);
   } else {
    element = $('.content-block-footer').first();
    showDetail(element);
   }
});

$(document).ready(function() {  
    $(window).hashchange();

    $(".content-block-footer").click(function () {
        document.location.hash = $(this).attr('hook');
    });
});