Using .trigger to click a div simulate clicking an anchor link does not work

Question

I have assigned a div's 2nd Id to be a class of an <a> tag. when you click this div, it will simulate clicking the <a> tag.

$(".component-data").click(function(){
  var partNo = $(this).attr('id').split(' ')[1];
  var tableEQV = ("'a."+partNo+"'");
  $(tableEQV).trigger("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="58 59" class="component-data">comp data(click me for google)</div>
<div id="60 61" class="component-data">comp data(click me for facebook)</div>
<br />
<a class="59" href="http://www.google.com">link to simulate going to google</a>
<br />
<a class="61" href="http://www.facebook.com">link to simulate going to facebook</a>

score 0 · Accepted Answer · answered Dec 07 '16 at 10:15

Working fiddle.

If you clean the tableEQV variable and use [0] in the click call it should work :

$(".component-data").click(function(){
  var partNo = $(this).attr('id').split(' ')[1];
  var tableEQV = "a."+partNo;

  $(tableEQV)[0].click();
});

Hope this helps.

$(".component-data").click(function(){
  var partNo = $(this).attr('id').split(' ')[1];
  var tableEQV = "a."+partNo;

  $(tableEQV)[0].click();
});

//Just for demonstration
$('a').click(function(e){
  e.preventDefault();

  console.log('Anchor clicked');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="58 59" class="component-data">comp data(click me for google)</div>
<div id="60 61" class="component-data">comp data(click me for facebook)</div>
<br />
<a class="59" href="http://www.google.com">link to simulate going to google</a>
<br />
<a class="61" href="http://www.facebook.com">link to simulate going to facebook</a>

Rajshekar Reddy · Answer 2 · 2016-12-07T10:31:11.817

.trigger("click"); works only on the click event that are attached using jquery. And it will not simulate a click on the anchor tag as if it was a real mouse click.

Triggering a click via JavaScript will not open a hyperlink. This is a security measure built into the browser.

Solution: is to use .click()

$(tableEQV)[0].click();

Note that this calls the DOM native click method instead of the jQuery click method, which is what you need.

score 0 · Answer 3 · answered Dec 07 '16 at 10:31

Your reference to a tag is incorrect.

Problemactic code :

 var tableEQV = ("'a."+partNo+"'");

It should be rather,

var tableEQV = "a."+partNo;

$(".component-data").click(function() {
  var partNo = $(this).attr('id').split(' ')[1];
  //form correct a tag with class selector
  var tableEQV = "a." + partNo;
  //trigger click on anchor tag 
  $(tableEQV).trigger("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="58 59" class="component-data">comp data(click me for google)</div>
<div id="60 61" class="component-data">comp data(click me for facebook)</div>
<br />
<a class="59" href="http://www.google.com">link to simulate going to google</a>
<br />
<a class="61" href="http://www.facebook.com">link to simulate going to facebook</a>

Using .trigger to click a div simulate clicking an anchor link does not work

3 Answers3