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

The jQuery click function works fine here

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

$('.deletelanguage').click(function(){
    alert("success");
});

but if I set some <a> by ajax, $('.deletelanguage').click doesn't work.

for example

function CreateRow(jdata) { 
    $('#LangTable').append('<a class="deletelanguage">delete</a>');
}

$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

Now the $('.deletelanguage').click for the last <a> is not working.

jsfiddle example :http://jsfiddle.net/suhailvs/wjqjq/

Note: the CSS works fine here.

I want to make these newly appended <a> working with jQuery click.

$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

or

$('body').on('click','.deletelanguage',function(){
    alert("success");
});

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");
});

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

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(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});

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(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});

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!!