Как удалить только что добавленное сообщение?

Question

[Александр Шаповал]

Здравствуйте, у меня реализовано добавление и удаление сообщений через AJAX, после добавления сообщения идет ajax запрос на сервер и результат помещается в некий div, проблем с этим нет, проблема лишь в том что с этого div'а сообщения не удаляются хотя разница в разметке лишь в том что сообщения выводятся

<div class="message">
<a href="#" class="delete-post" data-id="{$post['id']}">
    <span class="glyphicon glyphicon-remove action"></span>
</a>
    <!-- разный html код -->
</div>

а новоприбывшее сообщение

<div id="new-message">
<div class="message">
<a href="#" class="delete-post" data-id="{$post['id']}">
    <span class="glyphicon glyphicon-remove action"></span>
</a>
    <!-- разный html код -->
</div>
</div>

А JS код для удаления вот

<script type="text/javascript">
        $(document).ready(function(){
            $('.delete-post').click(function(){
                var id = $(this).attr('data-id');
                $.post('/posts/' + id + '/delete', {}, function(data){
                    $('#notice').html(data);
                });
                return false;
            });
</script>

На новом сообщении $('.delete-post').click(); не хочет вообще работать

Answer 1

[link_irk]

Дело в том, что обработчик click навешивается на элементы, уже существующие в DOM. Если вы в DOM динамически добавляете элемент, то обработчик click в нём работать не будет. Используйте делегирование. api.jquery.com/on

Comments

[Александр Шаповал]

$('.delete-post').on('click', function(){
                var id = $(this).attr('data-id');
                $.post('/posts/' + id + '/delete', {}, function(data){
                    $('#notice').html(data);
                });
                return false;
            });

В таком виде проблема осталась прежней(

[link_irk]

Делегировать нужно родительскому элементу, который был в DOM дереве до навешивания обработчика.
Что-то типа такого:

$(".messages-container").on("click", ".delete-post", function() {
  //...
});

[Александр Шаповал]

link_irk: спасибо

Answer 2

[Александр Шаповал]

Проблему решил следующим образом, все сообщения поместил в общий div

<div id="listing-post">
<div id="new-message">
<div class="message">
<a href="#" class="delete-post">
   <span data-action="{$post['id']}" class="glyphicon glyphicon-remove action remove-action"></span>
</a>
    <!-- разный html код -->
</div>
</div>
</div>

А JS приобрел такой вид:

<script type="text/javascript">
        var container = document.getElementById('listing-post');
        container.onclick = function(event) {
            var id = event.target.getAttribute('data-action');
            if (!event.target.classList.contains('remove-action')) return;
            event.target.parentNode.hidden = !event.target.parentNode.hidden;
            
            $.post('/posts/' + id + '/delete', {}, function(data){
                $('#notice').html(data);
            });
            return false;
        }
</script>