jQuery click event not working after adding class

Question

In my JSP page I added some links    lt a class  applicationdata  href     id  1  gt Organization Data lt  a gt   lt a class  applicationdata  href     id  2  gt Business Units lt  a gt   lt a class  applicationdata  href     id  6  gt Applications lt  a gt   lt a class  applicationdata  href     id  15  gt Data Entity lt  a gt    It has a jQuery function registered for the click event      a applicationdata   click function         var appid     this  attr  id            gentab a   addClass  tabclick            gentab a   attr  href     datacollector          It will add a class  tabclick to  lt a gt  which is inside  lt li gt  with id  gentab   It is working fine  Here is my code for the  lt li gt     lt li id  applndata  gt  lt a class  tabclick  href   appdata  target  main  gt Application Data lt  a gt  lt  li gt   lt li id  gentab  gt  lt a href   datacollector  target  main  gt General lt  a gt  lt  li gt    Now I have a jQuery click handler for these links     a tabclick   click function         var liId     this  parent  li   attr  id        alert liId                 For the first link it is working fine  It is alerting the  lt li gt  id  But for the second  lt li gt   where the class  tabclick  is been added by first jQuery is not working   I tried    a tabclick   live  click   function    but then the first link click event was also not working

User · Answer

on document ready event there is no a tag with class tabclick  so you have to bind click event dynamically when you are adding tabclick class  please this code      a applicationdata   click function         var appid     this  attr  id            gentab a   addClass  tabclick        click function               var liId     this  parent  li   attr  id             alert liId                            gentab a   attr  href     datacollector

User · Answer

Since the class is added dynamically  you need to use event delegation to register the event handler    document  on  click    a tabclick   function         var liId     this  parent  li   attr  id        alert liId

User · Answer

Based on  Arun P Johny this is how you do it for an input    lt input type  button  class  btEdit  id  myButton1  gt    This is how I got it in jQuery     document  on  click    input btEdit   function          var id   this id      console log id         This will log on the console  myButton1  As  Arun said you need to add the event dinamically  but in my case you don t need to call the parent first   UPDATE  Though it would be better to say     document  on  click    input btEdit   function          var id     this  id      console log id         Since this is JQuery s syntax  even though both will work

User · Answer

You should use the following       gentab   on  click    a tabclick   function event        event preventDefault        var liId     this  closest  li   attr  id        alert liId           This will attach your event to any anchors within the  gentab element   reducing the scope of having to check the whole document element tree and increasing efficiency

User · Answer

live   is deprecated When you want to use for delegated elements then use  on   wiht the following syntax    document  on  click    a tabclick   function       This syntax will work for delegated events   on

User · Answer

I Know this is an old topic   but none of the above helped me  And after searching a lot and trying everything   I came up with this   First remove the click code out of the   document  ready part and put it in a separate   section  then put your click code in an   function             code    Like this    lt script gt      function          your click code        a tabclick   on  click  function             do something                lt  script gt

User · Answer

Here is the another solution as well  the bind method     document  bind  click     intro   function         var liId     this  parent  li   attr  id        alert liId                 Cheers

[jquery] jQuery click event not working after adding class

Examples related to jquery