Why jQuery cannot trigger native click on an anchor tag?

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.

Answers:

Answer

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.

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
Answer

i think you forgot to read documentation.

Document says :

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

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/

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.