Функция jQuery click не работает после вызова ajax?

Функция jQuery click отлично работает здесь

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

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

, но если я установил некоторый <a> ajax, $('.deletelanguage').click не работает.

например

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

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

Теперь $('.deletelanguage').click для последнего <a> не работает.

Пример jsfiddle: http://jsfiddle.net/suhailvs/wjqjq/

Примечание: CSS отлично работает здесь.

Я хочу, чтобы эти недавно добавленные <a> работали с кликом jQuery.

Ответы

Ответ 1

Проблема заключается в том, что .click работает только для элементов, уже находящихся на странице. Вы должны использовать что-то вроде on, если вы подключаете будущие элементы

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});

Ответ 2

Когда вы используете $('.deletelanguage').click() для регистрации обработчика события, он добавляет обработчик только к тем элементам, которые существуют в dom при выполнении кода

вам нужно использовать обработчики событий на основе делегаций.

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

Ответ 3

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

или

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

Ответ 4

Поскольку класс добавляется динамически, вам нужно использовать делегирование событий, чтобы зарегистрировать обработчик событий, например:

$('#LangTable').on('click', '.deletelanguage', function(event) {
    event.preventDefault();
    alert("success");
});

Это добавит ваше событие к любым якорям в элементе #LangTable, уменьшая объем проверки всего дерева элементов document и повышения эффективности.

FIDDLE DEMO

Ответ 5

Здесь FIDDLE

Такой же код, как ваш, но он будет работать с динамически создаваемыми элементами.

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

Ответ 6

Событие клика не существует в том месте, где определено событие. Вы можете использовать live или делегировать событие.

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

Ответ 7

Я протестировал простое решение, которое работает для меня! Мой javascript был в отдельном файле js. Я сделал то, что я поместил javascript для нового элемента в html, который был загружен ajax, и он отлично работает для меня! Это для тех, у кого есть большие файлы javascript!