How to trigger an event when hash location changes

Question

I'm trying to trigger an event when the hash changes inside my url using the method onhashchange. I'm calling it, but it doesn't ever seem to get executed.

I've tried the following.

$(function () {
    window.addEventListener("onhashchange", function () {
        alert("Here");
    });

    window.onhashchange = function () {
        alert("Changed");
    }
)};

is there any reason why these functions aren't being called?

When you use `addEventListener` you don't put `on` at the beginning of the event name. — Barmar, Jul 11 '16 at 21:49
http://stackoverflow.com/questions/3090478/jquery-hashchange-event — George G, Jul 11 '16 at 21:49

Artem Arkhipov · Accepted Answer · 2016-07-11T21:56:10.677

4

You should write 'hashchange' instead of 'onhashchange' in your first example.

This code works fine for me, at least in Chrome:

window.addEventListener('hashchange', function(e){
    console.log('changed');
})

Here is short code-snippet: https://jsfiddle.net/bm8jjwmq/

edited Jul 11 '16 at 21:56

answered Jul 11 '16 at 21:51

Artem Arkhipov

7,025
5
30
52

I think that use if could be a good solution too http://jsbin.com/relumuzimu/edit?html,js,output – Blind Jul 11 '16 at 21:53

score 0 · Answer 2 · answered Jul 11 '16 at 21:55

0

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

▲ For Support // ▼ implementation

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

Source: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

answered Jul 11 '16 at 21:55

radiantstatic

342
4
20

It should be a comment – Blind Jul 11 '16 at 21:58
To OP? I don't have enough reputation to comment. Apologies for the wrong spot. – radiantstatic Jul 11 '16 at 22:40

How to trigger an event when hash location changes

2 Answers2