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

Question

[Евгений Иванов]

На странице есть список ссылок

<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 возвращаются данные.
При втором - ничего не происходит. Запись в бд не удаляется, данные не возвращаются.
Т.е. не происходит вызов скрипта.

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

Comments

[Владимир Скибин]

у Вас в приходящих данных не приходит код, который изменяет что либо с .delete_message_link ?

[Егор Живагин]

Владимир Скибин, я не Ванга, но мне кажется, он их перезаписывает и теряется обработчик)

Answer 1

[Егор Живагин]

Покажите структуру html

Почти уверен, что решением будет обработчик вешать вот так :

$('#messages_area').on('click', '.delete_message_link', function(){

Comments

[Евгений Иванов]

К сожалению там много html.
Наверно это часть кода

<div id="messages_area" name="messages_area" class="ui_scrollable_div_1 messages_scroll_settings">
<table class="ui_table_6 messages_area_content_table">
<tbody><tr><td height="20">Тест</td><td>тип сооб</td><td><a href="#" class="ui_link_2 delete_message_link" id="4">Удалить</a></td></tr>
<tr><td height="20">Тест</td><td>ээ</td><td><a href="#" class="ui_link_2 delete_message_link" id="7">Удалить</a></td></tr>
<tr><td height="20">Тест</td><td>ээ</td><td><a href="#" class="ui_link_2 delete_message_link" id="19">Удалить</a></td></tr>
<tr><td height="20">Тест</td><td>ээ</td><td><a href="#" class="ui_link_2 delete_message_link" id="20">Удалить</a></td></tr>
<tr><td height="20">Тест</td><td>ээ</td><td><a href="#" class="ui_link_2 delete_message_link" id="22">Удалить</a></td></tr>
<tr><td></td><td width="98"></td><td width="70"></td></tr></tbody>
</table>
</div>

И чем мой обработчик плох? И ведь первый раз всё работает.
Ясно обработчику говорю - кликнули по элементу с классом delete_message_link - получи id и выполни запрос.

Может дело в $(document).ready(function?

[Егор Живагин]

Евгений Иванов, почитайте про делегирование событий в JS . Или загуглите "клик на динамических элементах js"

Если коротко - после первого клика (в вызове .html() ) вы убиваете все элементы, на которых висит клик. И создаёте новые, с тем же классом. Но клик на них не висит. Такое изменение обработчика должно помочь

Answer 2

[Филипп Гапоненко]

Это происходи по следующей причине:

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

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

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

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

Comments

[Евгений Иванов]

Понятно. Я плохо разбираюсь в логике работы js ajax.
Я считал, что наличие html кода достаточно для выполнения действия.
Но похоже, что нужно ещё выполнение кода ( $(document).ready?), где и произойдет навешивание (связь класс=функция) delete_message_link.
А во втором случае происходит только возврат данных (обновление) области #messages_area.
А так как $(document).ready не вызывался, то и $('.delete_message_link').on('click', function() не связала класс ссылки с вызовом функции.

Как то так?

[Егор Живагин]

Евгений Иванов, нет, не так
document.ready сюда мало отношения имеет
Фишка в том, что вы не обновляете область, а, технически, полностью заменяете её новыми элементами. Клик привязывается не к классу, а к конкретному элементу