10

Why clicking on trigger1 and trigger2 doesn't fire click on open ?

<a id="trigger1" href="#" onclick="jQuery('#open').trigger('click');">trigger1</a>  
<a id="trigger2" href="#" onclick="jQuery('#open').click();">trigger2</a>
<a id="open" href="http://google.com">open</a>

Using ready (trigger3) doesn't work too:

<a id="trigger3" href="#">trigger3</a>

...

jQuery(document).ready(function(){    
  jQuery('#trigger3').bind('click', function(){
      jQuery('#open').html('to be fired'); /* works */
      jQuery('#open').click();        
  });

  jQuery('#trigger3').click(function(){
      jQuery('#open').html('to be fired'); /* works */
      jQuery('#open').click();
  });
});
5
  • 2
    why do you use inline javascript? Commented Apr 7, 2011 at 7:42
  • Wait, does trigger3 work or not? Commented Apr 7, 2011 at 7:43
  • trigger3 doesn't fire click() on open, but changing content of open works Commented Apr 7, 2011 at 7:46
  • remove onclick="...." from both links Commented Apr 7, 2011 at 7:47
  • @marioosh it is not a good programming practice to have inline code. You cannot separate it to an external file, minimize it and at the you have to make changes to all the files if somthing changes. Put your js to an external file and import it at the head of the page. Commented Apr 7, 2011 at 7:52

6 Answers 6

23

It's important to clarify that doing jQuery('#open').click() does not execute the href attribute of an anchor tag so you will not be redirected. It executes the onclick event for #open which is not defined.

You can accomplish the redirect and the ability to cause it with your original jQuery('#open').click() code by giving #open a click event:

jQuery('#open').click( function (e) {
  window.location.href = this.href;
});
Sign up to request clarification or add additional context in comments.

1 Comment

Finally found this one that helped me complete a task of trying to use a button element to trigger a mailto link. Thanks Jake.
7

From what your code looks like, you want when a user clicks on link one or two (trigger 1 or 2) you want the link in open to be followed?

If this is the case, .click() isn't actually the function you want, in fact jQuery doesn't seem to offer a method of directly clicking on an anchor element. What it will do is trigger any event's which are attached to an element.

Take a look at this example:

<a id="trigger" href="#" onclick="$('#open').click();">trigger</a>
<a id="open" href="http://google.com">open</a>

jQuery:

$('#open').click(function(){
    alert('I just got clicked!'); 
});

Try it here

So there is an event attached to the element with the ID open that simply alerts to say it was clicked. Clicking on the trigger link simply triggers the click event on the element with the ID open. So it's not going to do what you want! It will fire any events but it won't actually follow the link
I removed the 2nd trigger because .click() is just a proxy for .trigger('click') so they do the same thing!

So to trigger an actual click on an anchor, you will have to do a little more work. To make this slightly more reuseable I would change your HTML a little (I'll expain why in a moment):

<a href="#" class="trigger" rel="#open">trigger google</a>
<a id="open" href="http://google.com">google</a>
<br/><br/>
<a href="#" class="trigger" rel="#bing">trigger bing</a>
<a id="bing" href="http://bing.com">bing</a>

jQuery (shortest):

$('.trigger').click(function(e){
    e.preventDefault();
    window.location = $($(this).attr('rel')).attr('href');
});

Try it here

OR:

$('.trigger').click(function(e){
    e.preventDefault();
    var obj = $(this).attr('rel');
    var link = $(obj).attr('href');
    window.location = link;
});

Try it here

Basically any link you want to follow another element add the class="trigger" to, this way it is re-useable. In the element you have added the class to, add a rel="#element-to-be-clicked" this will allow you to setup multiple clicks on different links.

  • So you are now capturing any clicks on an element with the class="trigger"
  • Finding the element you wanted to be clicked on rel="#element-to-be-clicked"
  • Getting the href address from the element
  • Changing the windows location to the new link

2 Comments

Thanks for in-depth explanation, Scroobler. Vote up:)
Actually, your "jQuery (shortest)" version can be compressed even further. Simply use $(this).off('click')[0].click() instead of the window.location line. This will unset the click event handler from within itself, then trigger a DOM-level click on the .trigger element. A DOM-level click will follow the link.
2

try with removing onclick="jQuery('#open').click();"

Also try to putting $('#trigger1') you are using jQuery('#trigger3')

On JSFIDDLE here.

Comments

2

you are binding event click to #trigger3 twice. remove one of them

Comments

1

Try this:

jQuery(document).ready(function(){    
  jQuery('#trigger3').bind('click', function(){
      jQuery('#open').text('to be fired'); /* works */
      jQuery('#open').click();        
  });

  jQuery('#trigger3').click(function(){
      jQuery('#open').text('to be fired'); /* works */
      jQuery('#open').click();
  });
});

jQuery('#open').html('to be fired'); will change the to just a text. That's why the 2nd select doesn't work.

1 Comment

i've put jQuery('#open').html('...') to show does jQuery('#open') works only. It doesn't make a deal with jQuery('#open').click();.
0

There is 3 types of links depending of the href content :

1) The href is a url
2) The href is a javascript call like "javascript:"
3) The href is useless ("#", "javascript:void(0)", ...), the function is directly bound on the link

That's why I make this little plugin to call the good method :

(function( $ ){
  $.fn.triggerClick = function() {
      var href = $(this).attr('href');
      //No useful link into href, try to call js click
      if(href.indexOf('#') == 0 || href.indexOf('javascript:void(') == 0 || href == '') {
         $(this).click();
      //JS call
      } else if(href.indexOf('javascript:') == 0) {
         eval(href);
      //URL
      } else {
         document.location.href = href;
      }
    };
  })( jQuery );

To call it, just use $('DOMelement').triggerClick().
Hope this could help. (This plugin is a prototype. Thank's to tell me if there is some errors...)

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.