jquery click event not firing

Question

I have this PAGE and I have if you scroll down the map to the li here is my code  HTML   lt ul class  play navigation  gt       lt li class  active  gt  lt a class  barino story bottom  href     gt The Story lt  a gt  lt  li gt       lt li gt  lt a class  barino video bottom  href     gt The Video lt  a gt  lt  li gt       lt li gt  lt a class  barino gallery bottom  href     gt The Gallery lt  a gt  lt  li gt       lt li gt  lt a class  barino equipment bottom  href     gt The Equipment lt  a gt  lt  li gt                             lt  ul gt    my jQuery   lt script type  text javascript  gt        document  ready function                play navigation a   click function                console log  this is the click                return false                       lt  script gt    Nothing is happening at all if i click on the links    you can view source and see its there   but if i paste it in console it works fine   what gives

User · Answer

I was wasting my time on this for hours  Fortunately  I found the solution  If you are using bootstrap admin templates  AdminLTE   this problem may show up  Thing is we have to use adminLTE framework plugins    example  ifChecked event      input   on  ifChecked   function event      alert event type     callback          For more information click here   Hope it helps you too

User · Answer

You need to prevent the default event  following the link   otherwise your link will load a new page         document  ready function                play navigation a   click function e               e preventDefault                console log  this is the click                          As pointed out in comments  if your link has no href  then it s not a link  use something else   Not working  Your code is A MESS   and ready   events everywhere    clean it  put all your scripts in ONE ready event and then try again  it will very likely sort things out

User · Answer

Might be useful to some   check for  pointer-events  none    In the CSS  It prevents clicks from being caught by JS  I think it s relevant because the CSS might be the last place you d look into in this kind of situation

User · Answer

Is this markup added to the DOM asynchronously  You will need to use live in that case   NOTE   live has been deprecated and removed in the latest versions of jQuery  for good reason   Please refer to the event delegation strategy below for usage and solution    lt script gt        document  ready function                play navigation a   live  click   function                console log  this is the click                return false                       lt  script gt    The fact that you are able to re-run your script block and have it work tells me that for some reason the elements weren t available at the time of binding or the binding was removed at some point  If the elements weren t there at bind-time  you will need to use live  or event delegation  preferably   Otherwise  you need to check your code for something else that would be removing the binding   Using jQuery 1 7 event delegation     function               play navigation   on  click    a   function  e            console log  this is the click            e preventDefault                   You can also delegate events up to the document if you feel that you would like to bind the event before the document is ready  note that this also causes jQuery to examine every click event to determine if the element matches the appropriate selector      document  on  click     play navigation a   function  e        console log  this is the click        e preventDefault

[jquery] jquery click event not firing?

Examples related to jquery