1

I am trying to create a jquery to click a hyperlink but nothing seems to be working.

HTML

<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
no avail
<a href="gohere.com">Show all</a>
</div>

what I was trying

$(".warning a").click()

Any suggestions?

Josh
  • 180
  • 1
  • 10

5 Answers5

4

Note that jQuery-initiated "click" events will fire the event but will not cause navigation to occur.

Instead you can read the link's HREF attribute and directly set the window location:

// The click event:
$('a').on("click", function() {
  console.log("Click event fired");
})


var demo1 = function() {
  // This will trigger the click event, but will not navigate.
  $(".warning a").click()
}

var demo2 = function() {
  // This will navigate but will not trigger the click event. (If you need both to happen, trigger the click event first, and consider delaying the window location update if necessary.)
  var url = $(".warning a").attr("href")
  window.location = url;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="main" class="main-content">
  <div class="container">
    <div class="warning" role="alert">
      <a href="https://example.com">Show all</a>
    </div>
  </div>
</main>

<!-- for demo: -->
<button onclick="demo1()">Won't work</button>
<button onclick="demo2()">Will work</button>
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • 1
    I'd like to also share this answer: [One does not simply redirect using jQuery](https://stackoverflow.com/a/506004/8371135) to expand the different ways of using `window.location` – Rodrigo Ferreira Jul 02 '18 at 19:20
1

jQuery's .click() (without arguments) is a shortcut for .trigger("click"):

function(a,c) {
    return arguments.length > 0 ? this.on(b, null, a, c) : this.trigger(b)
}

Therefore, it will not actually click the element, but just call the click event handlers attached to it, as you can see here:

const $link = $("a");

$link.on("click", () => {
  console.log("Clicked? Not really...");
});

$link.click();
$link.trigger("click");
<a href="https://stackoverflow.com">Show all</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You need to get a reference to the actual DOM element and then call HTMLElement.click() on that:

$("a")[0].click();
<a href="https://stackoverflow.com">Show all</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Danziger
  • 19,628
  • 4
  • 53
  • 83
0

You can user the vanilla click method:

document.querySelector('.warning > a').click()

// equivalent jquery
//$('.warning > a')[0].click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warning" role="alert">
  no avail
  <a href="gohere.com">Show all</a>
</div>
maioman
  • 18,154
  • 4
  • 36
  • 42
0

Whenever you select div class with hyperlink there you get array because you can have multiple hyperlinks so you need to add somthing like below

Code

$('.warning a')[0].click();

For reference link

Get working example for click event

Rahul
  • 74
  • 8
0

If I need to redirect, I typically use window.location.href

window.location.href=$(".warning a").attr('href');
Gary B
  • 61
  • 5