jQuery preventDefault not triggered

Question

I have the following code      document  ready function            div subtab left li notebook a   click function event        event preventDefault        return false                    but when I click the element    it doesn t prevent the default action    Why   and when modifying the code to     document  ready function            div subtab left li notebook a   click function         e preventDefault        alert  asdasdad        return false                    it stops the default action but does not alert    I couldn t find any answer on jQuery docs   The full code goes like this     document  ready function         tabs div tab   hide        tabs div tab first   show        tabs ul li first   addClass  active         tabs ul li a   click function        tabs ul li   removeClass  active      this  parent   addClass  active    var currentTab     this  attr  href        tabs div tab   hide      currentTab  show    return false              div subtab left li notebook a   click function e        e preventDefault        e stopPropagation        e stopImmediatePropagation         alert  asdasdad        return false                  and the HTML structure is    lt div id  tabs  gt   lt ul id  nav  gt   lt li gt  lt a id  tab1  href   tab-1  gt  lt  a gt  lt  li gt   lt li gt  lt a id  tab2  href   tab-2  gt  lt  a gt  lt  li gt   lt li gt  lt a id  tab3  href   tab-3  gt  lt  a gt  lt  li gt   lt li gt  lt a id  tab4  href   tab-4  gt  lt  a gt  lt  li gt   lt  ul gt    lt div class  tab  id  tab-1  gt           lt script type  text javascript  gt   document  ready function      ul produse li   hover function                 ul produse li   removeClass  active     this  addClass  active      function       this  removeClass  active               lt  script gt        lt div class  subtab left  gt            lt ul gt               lt li class  notebook  gt  lt a href     gt 1 lt  a gt  lt  li gt               lt li class  netbook  gt  lt a href     gt 2 lt  a gt  lt  li gt                     lt li class  allinone  gt  lt a href     gt 2 lt  a gt  lt  li gt                lt li class  desktop  gt  lt a href     gt 2 lt  a gt  lt  li gt                lt li class  procesoare  gt  lt a href     gt 2 lt  a gt  lt  li gt                lt li class  placi video  gt  lt a href     gt 2 lt  a gt  lt  li gt                   lt li class  hdd desktop  gt  lt a href     gt 2 lt  a gt  lt  li gt               lt li class  tv plasma  gt  lt a href     gt 2 lt  a gt  lt  li gt               lt li class  tv lcd  gt  lt a href     gt 2 lt  a gt  lt  li gt               lt li class  telefoane mobile last item  gt  lt a href     gt 2 lt  a gt  lt  li gt           lt  ul gt       lt  div gt

User · Answer

Try this one         div subtab left li notebook a   click function e        e preventDefault        return false

User · Answer

If you already test with a submit action  you have noticed that not works too   The reason is the form is alread posted in a   document  read      So  all you need to do is change that to   document  load      Now  in the moment of you browaser load the page  he will execute   And will work  D

User · Answer

Update  And there s your problem - you do have to click event handlers for some a elements  In this case  the order in which you attach the handlers matters since they ll be fired in that order   Here s a working fiddle that shows the behaviour you want   This should be your code     document  ready function              tabs div tab   hide            tabs div tab first   show            tabs ul li first   addClass  active            div subtab left li notebook a   click function e            e stopImmediatePropagation            alert  asdasdad            return false                   tabs ul li a   click function            alert  Handling link click                tabs ul li   removeClass  active              this  parent   addClass  active            var currentTab     this  attr  href                tabs div tab   hide              currentTab  show            return false                 Note that the order of attaching the handlers has been exchanged and e stopImmediatePropagation   is used to stop the other click handler from firing while return false is used to stop the default behaviour of following the link  as well as stopping the bubbling of the event  You may find that you need to use only e stopPropagation    Play around with this  if you remove the e stopImmediatePropagation   you ll find that the second click handler s alert will fire after the first alert  Removing the return false will have no effect on this behaviour but will cause links to be followed by the browser   Note  A better fix might be to ensure that the selectors return completely different sets of elements so there is no overlap but this might not always be possible in which case the solution described above might be one way to consider      I don t see why your first code snippet would not work  What s the default action that you re seeing that you want to stop    If you ve attached other event handlers to the link  you should look into event stopPropagation   and event stopImmediatePropagation   instead   Note that return false is equivalent to calling both event preventDefault and event stopPropagation  ref In your second code snippet  e is not defined  So an error would thrown at e preventDefault   and the next lines never execute  In other words     div subtab left li notebook a   click function         e preventDefault        alert  asdasdad        return false           should be     note the e declared in the function parameters now    div subtab left li notebook a   click function e        e preventDefault        alert  asdasdad        return false            Here s a working example showing that this code indeed does work and that return false is not really required if you only want to stop the following of a link

User · Answer

Try this       div subtab left li notebook a   click function e        e preventDefault

User · Answer

i just had the same problems - have been testing a lot of different stuff  but it just wouldn t work  then i checked the tutorial examples on jQuery com again and found out   your jQuery script needs to be after the elements you are referring to    so your script needs to be after the html-code you want to access   seems like jQuery can t access it otherwise

User · Answer

If e preventDefault    is not working you must use e stopImmediatePropagation    instead  For further informations take a look at    What  39 s the difference between event stopPropagation and event preventDefault     quot div subtab left li notebook a quot   click function e        e stopImmediatePropagation        return false

[jquery] jQuery preventDefault() not triggered

Examples related to jquery

Examples related to event-handling

Examples related to jquery-events