jQuery programatically click a tag that has javascript:void(0)

Question

I am trying to programmatically click the "zoom in" icon three times on a page. The <a> is structured:

<a class="get-plus" title="zoom in" href="javascript:void(0)" style="display: inherit;">&nbsp;</a>

I have the following code, called on document ready:

function zoomIn() {
    // Zoom in 
    for (var i = 0; i < 3; i++) {
        $('a.get-plus').trigger('click');
        alert(i);
    }
}

I get the alerts that the loop works, but the zoom functionality isn't working, not sure how to fix or a better way to go about this?

Hmmm.. How is the zoom functionality attached to the link though? The "javascript:void(0)" does nothing, so my guess is the zoom effect happens another way somehow? — nibnut, Jan 06 '17 at 21:22
I'm using a javascript plugin for an org chart, buried in their js (minified) is the code that actually handles it, but I can't make sense of the minified code. — troyrmeyer, Jan 06 '17 at 21:24

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Your way to trigger the click event doesn't work.

Instead use HTMLElement.click():

The HTMLElement.click() method simulates a mouse-click on an element.

When click() is used with supported elements (e.g. one of the types), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events. One exception: The click() method will not cause an element to initiate navigation as if a real mouse-click had been received.

Therefore, change it from:

$('a.get-plus').trigger('click');

to:

$('a.get-plus').get(0).click();

The example:

function zoomInChanged() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      $('a.get-plus').get(0).click();
    }, i * 1000);
  }
}

function zoomIn() {
  // Zoom in
  for (var i = 0; i < 3; i++) {
    $('a.get-plus').trigger('click');
    console.log(i);
  }
}

console.log('zoomIn:');
zoomIn();
console.log('zoomInChanged:');
zoomInChanged();

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


<a class="get-plus" title="zoom in" href="javascript:console.log('Clicked')" style="display: inherit;">&nbsp;</a>

More reading:

jQuery's event handling system is a layer on top of native browser events. When an event handler is added using .on( "click", function() {...} ), it can be triggered using jQuery's .trigger( "click" ) because jQuery stores a reference to that handler when it is originally added.

Additionally, it will trigger the JavaScript inside the onclick attribute.

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.

Could you explain why [`.trigger('click')`](http://api.jquery.com/trigger/) doesn't work and [`.click()`](https://api.jquery.com/click/) does? What does `.get()` do in this example? Would it work with `.eq()` too? — tao, Jan 06 '17 at 21:32
This works, but only "zooms" in one time, is it a timing thing that doesn't iterate the other two times? There's approximately a .5 second animation per "zoom" which might be stopping the others? — troyrmeyer, Jan 06 '17 at 21:38
@troyrmeyer Answer updated, now among each click there is one second delay. — gaetanoM, Jan 06 '17 at 21:51
@AndreiGheorghiu trigger can handle jQuery events or special events like click on an input type checkbox (see the source code). Instead, using get and not eq I obtain the dom element and not the jquery element. For this element I can trigger click. I hope this help — gaetanoM, Jan 06 '17 at 21:54

score 0 · Answer 2 · answered Jan 06 '17 at 21:25

0

<a href="javascript:void(0)"> is a hack used to make something clickable, but not move the user to a new page. It is in no way related to your zoom functionality.

You're most likely using some sort of a library or plugin to make images zoomable. You should read the docs, and see if you library provides a way to programmatically trigger zooming.

answered Jan 06 '17 at 21:25

Schlaus

18,144
10
36
64

Just curious, why would you try to hack to make something clickable, but not do anything? Would you use it to make a `div` clickable but have to do nothing? Isn't the `` tag enough? – Loaf Jan 06 '17 at 21:29
@Loaf Using an anchor () tag with a href attribute makes a browser treat whatever is inside the element as clickable, ie. you get the pointer icon when hovering your mouse above it etc. You do need the href attribute however, or that wont work. You'd then attach an event listener to the same element to actually do whatever you want the clickable element to do. A better solution would be to use a proper tag, like – Schlaus Jan 07 '17 at 09:05

jQuery programatically click a tag that has javascript:void(0)

2 Answers2