библиотека jQuery нажмите кнопку функция не работает после 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 click.

7 57
html jquery dom ajax

7 ответов:

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

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

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

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

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

или

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

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

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

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

СКРИПКА ДЕМО

6

здесь скрипка

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

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

событие click не существует в том месте, где оно определено. Вы можете использовать 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>');
});
2

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

1