$(window).on('hashchange') Not firing when I change the hash with Jquery programmatically?

Question

I have two Jquery functions one is

$('.navbar-nav').on('click', 'a', function (event) {
    event.preventDefault(); //prevents quick jumps.
    var href = $.attr(this, 'href');
    href = href.replace(/^\//, '');
    if (href != '#') {
        if ($(href).length) {
            var g = $(href).offset().top - h;
            $bod.animate({
                scrollTop: g - 5
            }, 1000,
            function () { //change hash here
                if (history.pushState) {
                    history.pushState(null, null, href);
                }
                else {
                    window.location.hash = href;
                }
            });
        }
    };
    var g = $(window).width();
    if (g <= 768) {
        $(".navbar-toggle").click();
    }
});

And the second function is

$(window).on('hashchange', function() {
    alert(location.hash);
});

The hash change event does not alert. I am guessing that i might not be using event.preventdefault() properly. I am new to Jquery and cannot understand why hashchange is not triggered. Any ideas?

Edit: this code is wrapped in $(document).ready() & var $bod = $('html,body'); can this be the reason? Edit: The console does not present any Jquery errors.

Maybe you need ensure that DOM is ready $(function() { $(window).on('hashchange', ... }); — Miguel Q., Jan 24 '14 at 16:11
Might be because `hashchange` event doesn't listen to `history.pushState` — putvande, Jan 24 '14 at 16:22
@user2175422 if you know exactly where you want the event to be triggered why not fire it manually by putting $(window).trigger('hashchange') after the animation? or you can create a custom event that you have more control over it — Larry, Jan 24 '14 at 16:27
http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate — putvande, Jan 24 '14 at 16:31
@Larry I tried your solution by putting the code after `history.pushstate()` but now it is triggered twice. — user2175422, Jan 24 '14 at 16:41
@user2175422 did you put it under history.pushState(null, null, href);? — Larry, Jan 24 '14 at 16:52
@Larry yes exactly after it in the `if` condition since putvande's comment is right. — user2175422, Jan 24 '14 at 16:54
@user2175422 could you please put it under the animation? $bod.animate({ scrollTop: g - 5 }, 1000, function () { //change hash here if (history.pushState) { history.pushState(null, null, href); } else { window.location.hash = href; } }); — Larry, Jan 24 '14 at 17:17
@Larry Thanks for the reply. But I just changed the complete function and added animation on hash change cause that was my original plan. — user2175422, Jan 24 '14 at 17:21
I found the answer to this question here: http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate — carmolim, Apr 21 '15 at 00:31

score 0 · Answer 1 · answered May 14 '14 at 11:53

As far as I know 'hashchange' is not a native jQuery event. It doesn't work for me either with jQuery. Just using regular JS works fine however, ie:

window.addEventListener('hashchange', function() {
    // DO STUFF
}, false);

And window.attachEvent... for older versions of IE

$(window).on('hashchange') Not firing when I change the hash with Jquery programmatically?

1 Answers1