87

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.

Improve this question
0

7 Answers 7

Reset to default
211

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");
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I was having this problem too, you have to be sure that you use a parent id or class in the first $('#here') and then the actual class of the button after "click", . Thanks for our answer,
like what @rafaelmsantos said, you have to go to up a parent id/class that doesn't get added dynamically
It also worth mentioning that the parent element should not be part of the AJAX call. In other words, the parent should not be generated by the AJAX call.
93

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

1 Comment

Thank's it works using $(document) instead of element itself, then declaring element in the .on() parameters!
30 
$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

or

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

Comments

9

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

Improve this answer

2 Comments

Thanks for your answer. but i want the default a href
ok, event.preventDefault() is not required then!
5

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>');
});
Improve this answer

Comments

2

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>');
});
Improve this answer

2 Comments

This is deprecated and should not be used. As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Sure, but sometimes when stuck with older versions of jQuery live() is the only one that works, even against delegate().
1

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

Improve this answer

2 Comments

I had this same issue and, curiously, inserting the .js at the end of the ajax loaded html, works!
That's not good, then you will end up with duplicated js for each time you reload the component as the js gets moved out of the ajax loaded content! Beware of this solution.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.