Trigger click on a tag when pressing fake read more button

Question

Structure is as following:

div
  h1
    a
  p
  .more-info

When I click on .more-info div I need to simulate a click on the 'a'.

 $(".more-info").click(function() {
   $(this).parent().find('h1').find('a').get(0).trigger('click');
 })

This gives following error:

$(...).parent(...).find(...).find(...).get(...).trigger is not a function

Output of

 console.log($(this).parent().find('h1').find('a').get(0))

is the correct element I need to click.

I've tried without .get(0) and get following when I log that

 [a, prevObject: jQuery.fn.init(1), context: p.more-info, selector: "h1 a"]

Barmar · Accepted Answer · 2017-07-06T17:36:31.037

3

.get(0) returns the DOM element within the jQuery object, but .trigger() is a jQuery function, so it needs to operate on the jQuery object.

But if you're trying to emulate the browser's built-in action when clicking on a link, .trigger() won't do it. You need to call the DOM element's .click() method.

 $(".more-info").click(function() {
   $(this).parent().find('h1').find('a').get(0).click();
 });

See How to trigger a click on a link using jQuery

edited Jul 06 '17 at 17:36

answered Jul 06 '17 at 17:19

Barmar

741,623
53
500
612

the .get(0) was a desperate attempt because it didn't work without it either. Nothing happens and when I log it I get the correct element. For some reason the click is just not working. Even when I copy selector from elements directly and .trigger('click') or .click() it does nothing. – Martijn Kerckhaert Jul 06 '17 at 17:32
1

Note that `.click()` does not trigger the browser's built-in click handling, it only runs the jQuery handler. So it won't follow the link in the ``. – Barmar Jul 06 '17 at 17:33

dejakob · Answer 2 · 2017-07-06T17:47:53.047

1

You could use the element's .click() method, but I would recommend putting a link on the more-info element itself.

Anyhow, this should work:

$(this).parent().find('h1 > a').get(0).click();

Check out the fiddle here: https://jsfiddle.net/Lpyctuga/4/

edited Jul 06 '17 at 17:47

answered Jul 06 '17 at 17:19

dejakob

2,062
14
21

the .get(0) was a desperate attempt because it didn't work without it either. Nothing happens and when I log it I get the correct element. For some reason the click is just not working. Even when I copy selector from elements directly and .trigger('click') or .click() it does nothing. – Martijn Kerckhaert Jul 06 '17 at 17:32
When I log when clicking with $(this).parent().find('h1 > a').click(); I get following [a, prevObject: jQuery.fn.init(1), context: p.more-info, selector: "h1 > a"] – Martijn Kerckhaert Jul 06 '17 at 17:33
That means he cannot find the a-element. Are you sure the HTML structure is as provided or not another element was found with the $('.more-info') selector? – dejakob Jul 06 '17 at 17:35
1

Here's an example in vanilla JavaScript: https://jsfiddle.net/Lpyctuga/ – dejakob Jul 06 '17 at 17:39
1

And here with jQuery: https://jsfiddle.net/Lpyctuga/1/ Turns out you better do use .get(0) because triggering a click on the element collection can give issues. – dejakob Jul 06 '17 at 17:46

Trigger click on a tag when pressing fake read more button

2 Answers2