按下假的更多阅读按钮时触发标签点击

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"]

Answer 1

.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

Answer 2

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/