jQuery click function doesn t work after ajax call

Question

The jQuery click function works fine here   lt div id  LangTable  gt  lt a class  deletelanguage  gt delete lt  a gt  lt  div gt           deletelanguage   click function        alert  success          but if I set some  lt a gt  by ajax      deletelanguage   click doesn t work   for example  function CreateRow jdata             LangTable   append   lt a class  deletelanguage  gt delete lt  a gt          ajax               url    jobseeker profile        success  CreateRow       Now the     deletelanguage   click for the last  lt a gt  is not working   jsfiddle example  http   jsfiddle net suhailvs wjqjq   Note  the CSS works fine here   I want to make these newly appended  lt a gt  working with jQuery click

User · Answer

The click event doesn t exist at that point where the event is defined  You can use live or delegate the event       deletelanguage   live  click  function        alert  success            LangTable   append    lt br gt ------------ lt br gt   lt a class  deletelanguage  gt Now my class is deletelanguage  click me to test it is not working  lt  a gt

User · Answer

The problem is that  click only works for elements already on the page  You have to use something like on if you are wiring up future elements      LangTable   on  click    deletelanguage   function      alert  success

User · Answer

I tested a simple solution that works for me  My javascript was in a js separate file  What I did is that I placed the javascript for the new element into the html that was loaded with ajax  and it works fine for me  This is for those having big files of javascript

User · Answer

body   delegate   deletelanguage   click  function        alert  success          or     body   on  click    deletelanguage  function        alert  success

User · Answer

Since the class is added dynamically  you need to use event delegation to register the event handler like       LangTable   on  click     deletelanguage   function event        event preventDefault        alert  success          This will attach your event to any anchors within the  LangTable element   reducing the scope of having to check the whole document element tree and increasing efficiency   FIDDLE DEMO

User · Answer

When you use     deletelanguage   click   to register an event handler it adds the handler to only those elements which exists in the dom when the code was executed  you need to use delegation based event handlers here    document  on  click     deletelanguage   function        alert  success

User · Answer

Here s the FIDDLE  Same code as yours but it will work on dynamically created elements     document  on  click     deletelanguage   function          alert  success            LangTable   append    lt br gt ------------ lt br gt   lt a class  deletelanguage  gt Now my class is deletelanguage  click me to test it is not working  lt  a gt

[html] jQuery click function doesn't work after ajax call?

Examples related to html

Examples related to ajax

Examples related to jquery

Examples related to dom