click on button based on data-category after page load

Question

Here is my menu:

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

I'm trying to click in the film button when page is loaded but I have no success. Reading in several places, this is the result that I got, but does not work

jQuery(document).ready(function() {
   jQuery('a[data-category="film"]')).trigger( "click" );
});

I have a limited knowledge on JavaScript and jQuery, so probably I'm using the right script in the wrong place or in a bad way.

Can you please support me?

score 1 · Accepted Answer · answered Sep 20 '17 at 03:49

Here you go with a solution https://jsfiddle.net/hxn7cfhv/

jQuery('a[data-category="film"]').click(function(){
  console.log("Film button clicked");
});

jQuery(document).ready(function() {
  jQuery('a[data-category="film"]').trigger( "click" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

Issue was with your code jQuery('a[data-category="film"]')).trigger( "click" );, it has extra closing bracket before .trigger.

Hope this ill help you.

The actual problem was not the bracket (i also saw that). It simply does not work without an explicit click binding on the link. Try it without the custom binding and you'll see it. Simply attach an url to the href attribute and remove the custom binding. It won't work. — thex, Sep 21 '17 at 14:17

thex · Answer 2 · 2017-09-20T00:43:31.470

If click does not work you can simply read out the href attribute from the link tag and open it manually ;). Here an example fiddle that should work. I prefilled your link with an working url to demonstrate.

JS Snippet

jQuery(document).ready(function() {
   $link = jQuery('a[data-category="film"]');
   target = $link.attr("target");
   href = $link.attr("href");
   window.open(href, target);
});

https://jsfiddle.net/1oqLrL1d/3/

However if you want to trigger a click event bound to your link. Please make sure this event is bound before the actual trigger / click is called. Otherwise it won't work. Furthermore you could also bind a click event on the links and create your own functionality. Just a few ideas.

How to trigger click on page load?

Code updated, target handling.

score 0 · Answer 3 · edited Sep 20 '17 at 16:43

0

Use Id or class

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button filmbtn" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

jQuery(document).ready(function() {
   jQuery('.filmbtn')).trigger( "click" );
});

edited Sep 20 '17 at 16:43

Shiladitya

12,003
15
25
38

answered Sep 20 '17 at 00:36

Anil Shrestha

1,180
11
16

click on button based on data-category after page load

3 Answers3