jQuery click function doesn't work after ajax call?
HtmlAjaxJqueryDomHtml Problem Overview
The jQuery click function works fine here
<div id="LangTable"><a class="deletelanguage">delete</a></div>
$('.deletelanguage').click(function(){
alert("success");
});
<a>
by ajax, $('.deletelanguage').click
doesn't work.
but if I set some for example
function CreateRow(jdata) {
$('#LangTable').append('<a class="deletelanguage">delete</a>');
}
$.ajax({
url: "/jobseeker/profile/",
success: CreateRow
});
$('.deletelanguage').click
for the last <a>
is not working.
Now the 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.
Html Solutions
Solution 1 - Html
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");
});
Solution 2 - Html
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");
});
Solution 3 - Html
$('body').delegate('.deletelanguage','click',function(){
alert("success");
});
or
$('body').on('click','.deletelanguage',function(){
alert("success");
});
Solution 4 - Html
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.
Solution 5 - Html
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>');
});
Solution 6 - Html
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>');
});
Solution 7 - Html
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!!