Why jQuery cannot trigger native click on an anchor tag?

javascript trigger click event on element
jquery trigger click
how to call click event of anchor tag in javascript
javascript trigger click event programmatically
jquery trigger click on link
jquery click
javascript click button by id
jquery anchor trigger click not working

Recently I found jQuery cannot trigger the native click event on an anchor tag when I'm clicking on other elements, the example below won't work:

html

<a class="js-a1" href="new.html" target="_blank">this is a link</a>
<a class="js-a2" href="another.html" target="_blank">this is another link</a>

javascript

$('.js-a1').click(function () {
  $('.js-a2').click();
  return false;
});

And here is the jsfiddle - 1. Click on the first link won't trigger native click on the second one.

After some searches, I found a solution and an explanation.

Solution

Use the native DOM element.

$('.js-a1').click(function () {
  $('.js-a2').get(0).click();
  return false;
});

And here is the jsfiddle - 2.

Explanation

I found a post on Learn jQuery: Triggering Event Handlers. It told me:

The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

Question

So here comes my question:

How to understand 'there is no event handler attached using jQuery's event system that corresponds to these events'?

Why is there not such corresponding event handler?

EDIT

I update my jsfiddles, it seems there's and error on the class name.

there is no event handler attached using jQuery's event system that corresponds to these events

This means, at this point of the learning material, no jQuery event handlers has been attached to these elements using .click(function() {} or .bind('click', function () {}), etc.

The no-argument .click() is used to trigger (.trigger('click')) a "click" event from jQuery's perspective, which will execute all "click" event handlers registered by jQuery using .click, .bind, .on, etc. This pseudo event won't be sent to the browser.

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.

Check the updated jsFiddle example, click on the two links to see the difference. Hope it helps.

javascript, trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no  jQuery Event How to - Trigger onclick event of an anchor tag on document onload. Back to Mouse ↑ Question. We would like to know how to trigger onclick event of an anchor tag on document onload. Answer <!

First of all you need to prevent the default behaviour of link

$('.js-a1').click(function (e) {
  e.preventDefault();
  $('.js-a2').get(0).click();
  return false;
});

And to trigger the click event you can also use .trigger('click') better way

And the event handler is used like this:

$(document).on('click', '.js-a1',function(){//code in here});
// here now .js-a1 is event handler

Triggering Event Handlers, The idea is to use jQuery's .click() method to trigger the “click” JavaScript event on an element. This is demonstrated below: JS; HTML  The.trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events. 1 < a href = "http://learn.jquery.com" > Learn jQuery </ a >

i think you forgot to read documentation.

Document says :

// Triggering a native browser event using the simulate plugin
$( ".js-a2" ).simulate( "click" );

Trigger click event of an anchor tag with JavaScript/jQuery, HTML DOM click() Method. ❮ Element Object. Example. Simulate a mouse-click when moving the mouse pointer over a checkbox: <input  The.trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

Old question, but here's a nifty and simple solution: You can basically "register" a native JS event with jQuery by assigning the DOM element's onEvent handler to be the native event. Ideally, we would check first to ensure the onEvent handler has not already been set. For example, 'register' the native JS click event so it will be triggered by jQuery:

$('.js-a1').click(function (e) {
  $('.js-a2').click();
  e.preventDefault();
});

var trigger_element = $('.js-a2')[0]; // native DOM element
if (!trigger_element.onclick) {
  trigger_element.onclick = trigger_element.click;
}

Here is a fiddle: http://jsfiddle.net/f9vkd/162/

click(), user events. React has the same events as HTML: click, change, mouseover etc. Event handlers have access to the React event that triggered the function. how to alert on click event of anchor tag using jquery [Answered] RSS 4 replies Last post May 19, 2014 07:11 AM by Ashim Chatterjee

You have to use $("selector").trigger('click')

React Events, Use the click method from the raw DOM element (not the jQuery object): Triggering a link's click action seems easy on first sight: To make a link navigate to its href you need to say: Trigger native mouse events with Javascript When you cannot make Selenium trigger events you rely on (e.g. a "​change" event when  Look, you have something which does not work; and you don't know why. That's why I cannot trust any of your statements, only your code, and only obtained by proper Paste operation from the code you really tried. Also, instead of adding code to comment, click Improve question and do it. —SA

Trigger a link's click action with Javascript, Sending Native (DOM) Events; Sending Custom Events; Listening For Events; Removing jQuery actually walks the event up the DOM itself, triggering any This will involve adding a click handler to the anchor element and  StackOverflow: Why jquery cannot trigger native click on an anchor tag Publicado por Pabl.o en 11:51 Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook Compartir en Pinterest

Events – You Don't Need jQuery! – Free yourself from the chains of , Say you want to attach a click handler to a <button> . You almost And we bind it by watching for clicks way up on the document element itself: function() { // If the user clicked right on the SVG, // this will never fire }); I solved the problem using CSS. It's really easy to add an event listener in jQuery. Hello All, I have a button and a anchor tag. I want to open a new page on button click which is specified in href of anchor tag. But I want to open that new page without click on anchor tag but on the click of button.

Be Slightly Careful with Sub Elements of Clickable Things, Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):. <a> (but it must have an href ) 

Comments
  • have you tried event.preventDefault() ?
  • @TejasvaDhyani yes, return false; in jQuery will do both e.preventDefault(); and e.stopPropagation();.
  • .trigger("click") is the same as .click().
  • Agree with @cookiemonster, and $('.js-a2').get(0) will get a DOM element.
  • Also: return false does both e.preventDefault and e.stopPropagtion, in a jQuery handler, so one of those is redundant in your answer.
  • What documentation?
  • Yes it said that. But it's just another solution.
  • .trigger("click") is the same as .click().