Using url hash to perform click event

Question

So I have a page that has 3 buttons to filter content on the page.

<section class="solution-filter">
    <div class="wrapper">
        <button class="fact-sheet" data-target_category="fact-sheet" disabled="">Fact sheet</button>
        <button class="demo" data-target_category="demo">Demo</button>
        <button class="apps" data-target_category="apps">Apps and connectors</button>
    </div><!-- /.wrapper -->
</section>

I would like to be able to perform a click on a button depending on the url hash.

For example http://example.com/#demo would perform a click on the <button class="demo" data-target_category="demo">Demo</button>

if ( window.location.hash ) {
    $(document).click($('<button>').data('target_category', (window.location.hash));
}

You probably just want to listen for the hashchange event ? — adeneo
– adeneo, Commented Mar 1, 2017 at 11:52

Rory McCrossan · Accepted Answer · 2017-03-01 11:55:56Z

3

You've got the right idea, although the syntax you're using to raise the click event is not quite right. You need to first use the hash value to select the element, then call click() or trigger('click') on it.

if (window.location.hash) {
  $('.' + window.location.hash.substr(1)).click();
}

Note that the substr() call is used to remove the # from the start of the string.

The above code will work for you when the page loads. If you also want to know when the hash changes after page load you can use the hashchange event of the window:

$(window).on('hashchange', function() {
  if (window.location.hash) {
    $('.' + window.location.hash.substr(1)).click();
  }
});

edited Mar 1, 2017 at 11:55

answered Mar 1, 2017 at 11:52

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

C3roe Over a year ago

I would suggest to add a check for whether an element matching the hash content is actually found - stuff like this tends to throw nasty errors otherwise.

Rory McCrossan Over a year ago

@CBroe jQuery will still return an object from a selector even if nothing was found. You can be sure that there will be no errors raised from the above code if no element is found. The only way you could get an error is if the hash in the URL is not a valid selector

C3roe Over a year ago

Yeah you’re right, I probably confused that with more complex situations (such as where you want to initialize a jQuery plugin, $('.doesnotexist').someSlider(…)`, that often results in errors when there is no matching element.) And good point about invalid selectors (could probably use a regex to check for that, but on the other hand, might not really be necessary, as long as you have no links with weird hashes floating around.)

Satpal · Accepted Answer · 2017-03-01 11:52:59Z

2

You need get the button then trigger click(), $('<button>') will create a jQuery object not target the desired element.

if (window.location.hash)
    $('button[data-target_category="'+window.location.hash.substr(1)+'"]').click();

answered Mar 1, 2017 at 11:52

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

Using url hash to perform click event

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related