Почему код срабатывает только один раз?

На странице есть список ссылок
<a href="#" class="ui_link_2 delete_message_link" id="10">Удалить</a>
<a href="#" class="ui_link_2 delete_message_link" id="8">Удалить</a>


Этот код работает при каждом нажатии

$(document).ready(function() { 

$('.delete_message_link').on('click', function(){
alert('Сработало!');
return false;
});


});


Этот код работает только один раз

$(document).ready(function() { 

$('.delete_message_link').on('click', function(){
$.ajax({
url: 'actions.php?delete_message&id='+this.id,
success: function(data){$('#messages_area').html(data);}
});
return false;
});

});


При первом нажатии в базе удаляется запись и в #messages_are возвращаются данные.
При втором - ничего не происходит. Запись в бд не удаляется, данные не возвращаются.
Т.е. не происходит вызов скрипта.

Почему код срабатывает только один раз и как это исправить?
  • Вопрос задан
  • 1654 просмотра
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
avito front
Покажите структуру html

Почти уверен, что решением будет обработчик вешать вот так :
$('#messages_area').on('click', '.delete_message_link', function(){
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
filgaponenko
@filgaponenko
frontend developer
Это происходи по следующей причине:

.delete_message_link
у вас находятся внутри
#messages_area

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

После этого вы перезаписываете содержимое $('#messages_area').html(data); и, соответственно, на новых элементах обработчиков события уже нет.

Решением может быть навешивание обработчиков повторно после изменения содержимого $('#messages_area').html(data);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы