Can I call jQuery s click to follow an a link if I haven t bound an event handler to it with bind or click already

Question

I have a timer in my JavaScript which needs to emulate clicking a link to go to another page once the time elapses  To do this I m using jQuery s click   function  I have used     trigger   and window location also  and I can make it work as intended with all three  I ve observed some weird behavior with click   and I m trying to understand what happens and why  I m using Firefox for everything I describe in this question  but I am also interested in what other browsers will do with this  If I have not used    a   bind  click  fn  or    a   click fn  to set an event handler  then calling    a   click   seems to do nothing at all  It does not call the browser s default handler for this event  as the browser does not load the new page  However  if I set an event handler first  then it works as expected  even if the event handler does nothing     a   click function   return true    click     This loads the new page as if I had clicked the a myself  So my question is twofold  Is this weird behavior because I m doing something wrong somewhere  and why does calling click   do nothing with the default behavior if I haven t created a handler of my own   As Hoffman determined when he tried to duplicate my results  the outcome I described above doesn t actually happen  I m not sure what caused the events I observed yesterday  but I m certain today that it was not what I described in the question  So the answer is that you can t  quot fake quot  clicks in the browser and that all jQuery does is call your event handler  You can still use window location to change page  and that works fine for me

User · Answer

JavaScript jQuery doesn t support the default behavior of links  quot clicked quot  programmatically  Instead  you can create a form and submit it  This way you don t have to use window location or window open  which are often blocked as unwanted popups by browsers  This script has two different methods  one that tries to open three new tabs windows  it opens only one in Internet  Explorer and Chrome  more information is below  and one that fires a custom event on a link click  Here is how  HTML  lt html gt   lt head gt       lt script src  quot jquery-1 9 1 min js quot  type  quot text javascript quot  gt  lt  script gt       lt script src  quot script js quot  type  quot text javascript quot  gt  lt  script gt   lt  head gt    lt body gt       lt button id  quot testbtn quot  gt Test lt  button gt  lt br gt  lt br gt        lt a href  quot https   google nl quot  gt Google lt  a gt  lt br gt       lt a href  quot http   en wikipedia org wiki Main Page quot  gt Wikipedia lt  a gt  lt br gt       lt a href  quot https   stackoverflow com  quot  gt Stack Overflow lt  a gt   lt  body gt    lt  html gt   jQuery  file script js    function            Try to open all three links by pressing the button        - Firefox opens all three links        - Chrome only opens one of them without a popup warning        - Internet Explorer only opens one of them WITH a popup warning        quot  testbtn quot   on  quot click quot   function                    quot a quot   each function                         var form      quot  lt form gt  lt  form gt  quot                form attr                                id        quot formform quot                   action     this  attr  quot href quot                    method    quot GET quot                      Open in new window tab                 target    quot  blank quot                                  quot body quot   append form                  quot  formform quot   submit                   quot  formform quot   remove                                Or click the link and fire a custom event         open your own window without following         the link itself         quot a quot   on  quot click quot   function                 var form      quot  lt form gt  lt  form gt  quot            form attr                        id        quot formform quot                  The location given in the link itself             action     this  attr  quot href quot                method    quot GET quot                  Open in new window tab             target    quot  blank quot                          quot body quot   append form              quot  formform quot   submit               quot  formform quot   remove                Prevent the link from opening normally         return false               For each link element  it   Creates a form Gives it attributes Appends it to the DOM so it can be submitted Submits it Removes the form from the DOM  removing all traces  Insert evil laugh   Now you have a new tab window loading  quot https   google nl quot   or any URL you want  just replace it   Unfortunately when you try to open more than one window this way  you get an Popup blocked messagebar when trying to open the second one  the first one is still opened    More information on how I got to this method is found here   Opening new window tab without using window open or window location href

User · Answer

If you need this feature for one case or very few cases  your whole application is not requiring this feature   I would rather leave jQuery as is  for many reasons  including being able to update to newer versions  CDN  etc   and have the following workaround     For modern browsers   ele  trigger  quot click quot        Relying on Paul Irish s conditional class names      lt https   www paulirish com 2008 conditional-stylesheets-vs-css-hacks-answer-neither  gt      via HTML5 Boilerplate   lt https   html5boilerplate com  gt   where    each Internet Explorer version gets a class of its version    quot html ie7 quot   length  amp  amp   function        var eleOnClickattr     ele  attr  quot onclick quot       eval eleOnClickattr

User · Answer

Click handlers on anchor tags are a special case in jQuery   I think you might be getting confused between the anchor s onclick event  known by the browser  and the click event of the jQuery object which wraps the DOM s notion of the anchor tag   You can download the jQuery 1 3 2 source here   The relevant sections of the source are lines 2643-2645  I have split this out to multiple lines to make it easier to comprehend       Handle triggering native  onfoo handlers  and on links since we don t call  click   for links  if          elem type      jQuery nodeName elem   a    amp  amp  type     click     amp  amp          elem  on  type   amp  amp          elem  on  type  apply  elem  data       false           event result   false

User · Answer

It does nothing because no events have been bound to the event   If I recall correctly  jQuery maintains its own list of event handlers that are bound to NodeLists for performance and other purposes

User · Answer

To open hyperlink in the same tab  use    document  on  click    quot a classname quot   function         var form      quot  lt form gt  lt  form gt  quot        form attr                id        quot formid quot           action     this  attr  quot href quot            method    quot GET quot                   quot body quot   append form          quot  formid quot   submit           quot  formid quot   remove        return false

User · Answer

You can use jQuery to select the jQuery object for that element   Then  get the underlying DOM element and call its click   method  By id     quot  my-link quot   each function  index      this  get 0  click        Or use jQuery to click a bunch of links by CSS class     quot  my-link-class quot   each function  index      this  get 0  click

User · Answer

Another option is of course to just use vanilla JavaScript  document getElementById  quot a link quot   click

User · Answer

Trigger a hyperlink  lt a gt  element that is inside the element you want to hookup the jQuery  click   to   lt div class  quot TopicControl quot  gt       lt div class  quot articleImage quot  gt          lt a href  quot  quot  gt  lt img src  quot  quot  alt  quot  quot  gt  lt  a gt       lt  div gt   lt  div gt   In your script you hookup to the main container you want the click event on  Then you use standard jQuery methodology to find the element  type  class  and id  and fire the click  jQuery enters a recursive function to fire the click and you break the recursive function by taking the event  e  and stopPropagation   function and return false  because you don t want jQuery to do anything else but fire the link      TopicControl   click function  event          this  find  a   click        event stopPropagation        return false       Alternative solution is to wrap the containers in the  lt a gt  element and place  s as containers inside instead of  lt div gt  s  Set the spans to display block to conform with W3C standards

User · Answer

If you look at the code for the   click function  I ll bet there is a conditional statement that checks to see if the element has listeners registered for theclick event before it proceeds  Why not just get the href attribute from the link and manually change the page location   window location href      a   attr  href     Here is why it doesn t click through  From the trigger function  jQuery source for version 1 3 2      Handle triggering native  onfoo handlers  and on links since we don t call  click   for links   if     elem type      jQuery nodeName elem   a    amp  amp  type     quot click quot     amp  amp  elem  quot on quot  type   amp  amp  elem  quot on quot  type  apply  elem  data       false        event result   false       Trigger the native events  except for clicks on links   if    bubbling  amp  amp  elem type   amp  amp   event isDefaultPrevented    amp  amp    jQuery nodeName elem   a    amp  amp  type     quot click quot            this triggered   true       try            elem  type                  Prevent Internet Explorer from throwing an error for some hidden elements             catch  e                    After it calls handlers  if there are any   jQuery triggers an event on the object  However it only calls native handlers for click events if the element is not a link   I guess this was done purposefully for some reason   This should be true though whether an event handler is defined or not  so I m not sure why in your case attaching an event handler caused the native onClick handler to be called  You ll have to do what I did and step through the execution to see where it is being called

User · Answer

Interesting  this is probably a  feature request   ie bug  for jQuery  The jQuery click event only triggers the click action  called onClick event on the DOM  on the element if you bind a jQuery event to the element  You should go to jQuery mailing lists   http   forum jquery com    and report this  This might be the wanted behavior  but I don t think so   EDIT   I did some testing and what you said is wrong  even if you bind a function to an  a  tag it still doesn t take you to the website specified by the href attribute  Try the following code    lt html gt   lt head gt    lt script src  http   ajax googleapis com ajax libs jquery 1 3 jquery min js  gt  lt  script gt    lt script gt      document  ready function           Try to dis-comment this         a   click function          alert  jQuery click          return true                       function button onClick            a   click          function a onClick        alert  a onClick          lt  script gt    lt  head gt   lt body gt    lt input type  button  onclick  button onClick    gt    lt br gt    lt a id  a  href  http   www google com  onClick  a onClick    gt  aaa  lt  a gt    lt  body gt   lt  html gt     It never goes to google com unless you directly click on the link  with or without the commented code   Also notice that even if you bind the click event to the link it still doesn t go purple once you click the button  It only goes purple if you click the link directly   I did some research and it seems that the  click is not suppose to work with  a  tags because the browser does not suport  fake clicking  with javascript  I mean  you can t  click  an element with javascript  With  a  tags you can trigger its onClick event but the link won t change colors  to the visited link color  the default is purple in most browsers   So it wouldn t make sense to make the     click event work with  a  tags since the act of going to the href attribute is not a part of the onClick event  but hardcoded in the browser

[javascript] Can I call jQuery's click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

HTML

jQuery (file script.js)

Examples related to javascript

Examples related to jquery

Examples related to firefox

Examples related to events

Examples related to click