jQuery click function doesn't work after ajax call?

Question

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.

TGH · Accepted Answer · 2014-02-21T14:46:07.450

208

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

edited Feb 21 '14 at 14:46

answered Jul 18 '13 at 05:40

TGH

38,769
12
102
135

16

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, – rafaelmorais Oct 07 '14 at 11:05
5

like what @rafaelmsantos said, you have to go to up a parent id/class that doesn't get added dynamically – user1019042 Dec 18 '15 at 16:51
1

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. – Kalimah Sep 29 '16 at 09:09

score 91 · Answer 2 · answered Jul 18 '13 at 05:38

91

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

answered Jul 18 '13 at 05:38

Arun P Johny

384,651
66
527
531

Thank's it works using $(document) instead of element itself, then declaring element in the .on() parameters! – Tadas Stasiulionis Feb 07 '18 at 11:32
This is the real answer here – JamesS May 13 '22 at 14:53

score 28 · Answer 3 · answered Jul 18 '13 at 05:37

28

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

or

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

answered Jul 18 '13 at 05:37

coolguy

7,866
9
45
71

score 9 · Answer 4 · answered Jul 18 '13 at 05:39

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

answered Jul 18 '13 at 05:39

palaѕн

72,112
17
116
136

Thanks for your answer. but i want the default `a href` – suhailvs Jul 18 '13 at 05:59
ok, `event.preventDefault()` is not required then! – palaѕн Jul 18 '13 at 06:01

score 5 · Answer 5 · answered Jul 18 '13 at 05:39

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

score 2 · Answer 6 · answered Jul 18 '13 at 05:39

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

answered Jul 18 '13 at 05:39

prospector

3,389
1
23
40

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(). – msaad Jul 07 '14 at 02:00
Sure, but sometimes when stuck with older versions of jQuery live() is the only one that works, even against delegate(). – Wtower Sep 03 '14 at 12:55

score 1 · Answer 7 · answered Jul 13 '14 at 09:24

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

answered Jul 13 '14 at 09:24

pollux1er

5,372
5
37
36

I had this same issue and, curiously, inserting the .js at the end of the ajax loaded html, works! – JohnA10 Jan 15 '16 at 01:44
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. – nights Oct 19 '17 at 03:38

jQuery click function doesn't work after ajax call?

The jQuery click function works fine here

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

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

7 Answers7

Linked

Related

jQuery click function doesn't work after ajax call?

The jQuery click function works fine here

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

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

7 Answers7

Linked

Related

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

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