Как добавить элементы в DOM так, что бы на них работали события?

Question

[Billy Milligan]

Есть форма для комментариев:

<div class="comments-block">
	<div class="card-block">
		<form id="form-add-comment" action="/comments/add/{{ $post->id }}" method="POST">
			<div class="form-group">
				<textarea name="comment" placeholder="{{ __('ui.enter_comment') }}" class="form-control" maxlength="1024" required></textarea>
			</div>

			<div id="form-errors" class="alert alert-danger hidden-xs-up mt-3"></div>

			<div class="form-group mb-0">
				<input class="btn btn-primary btn-block" type="submit" value="{{ __('ui.send') }}">
			</div>
		</form>
	</div>
</div>

Новые комментарии добавляю так:

$("#form-add-comment").submit(function(event)
{
    event.preventDefault();
    var $form = $(this), $formErrors = $('#form-errors');

    $.post($form.attr("action"), $form.serialize(), 'html')
        .done(function (data) {
            var new_comment = $(data).hide();
			
            $formErrors.addClass("hidden-xs-up");
            $form.trigger('reset');
            $("#comments").append(new_comment);
            new_comment.show('slow');
            $formErrors.empty();
        })
        .fail(function(jqXhr) {
            if( jqXhr.status === 401 )
                $(location).prop( 'pathname', '/login' );
            if( jqXhr.status === 422 ) {
                var errorsHtml = '<ul class="m-0">';
				
                $formErrors.removeClass("hidden-xs-up");
                $.each(jqXhr.responseJSON , function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });

                errorsHtml += '</ul>';

                $formErrors.html(errorsHtml);
            } else {
                // остальные ошибки...
            }
        });
});

Удаляю комментарий по клику на кнопке в самом комментарии:

$(".deleteComment").click(function()
{
    var id = $(this).data("id");
    $(this).tooltip('hide');
    $(this).hide();

    $.ajax({
            url: "/comments/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE'
            }
        })
        .done(function (data) {
            $('#comments-count').html(data.commentsCount);
            $('#comment-'+id).hide('slow', function(){ $(this).remove(); });
        })
        .fail(function(jqXhr) {console.log("error");
            if(jqXhr.status === 404) { // нет такого комментария
                $('#comment-'+id).hide('slow', function(){ $(this).remove(); });
            }
        });
});

comment.blade.php:

<div id="comment-{{ $comment->id }}">
    <div class="media pt-3 mt-3">
        <a href="/users/{{ $comment->user->id }}">
            <img width="50" class="d-flex mr-3 rounded-circle" src="{!! url('/images/users/small/'.$comment->user->photo) !!}" alt="{{ $comment->user->name }}">
        </a>

        <div class="media-body">
            <h6 class="mb-1">
                <a href="/users/{{ $comment->user->id }}">{{ $comment->user->name }}</a>

                @if(Auth::check() && Auth::user()->id === $comment->user->id)
                    <button type="button" class="close deleteComment" aria-label="Delete" data-id="{{ $comment->id }}" data-toggle="tooltip" data-placement="top" title="{{ __('ui.remove') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                @endif
            </h6>

            <div>{{ $comment->text }}</div>

            <div class="text-muted">{{ $comment->updated_at->diffForHumans() }}</div>
        </div>
    </div>
</div>

Получается так, что если я добавляю комментарий, то удалить его я уже не могу, на ".deleteComment" нет события. Как решить эту проблему?

PS: jquery-3.2.1

Answer 1

[dmirogin]

$(document).on('click', '.deleteComment', function () {/* function code*/})

Comments

[Billy Milligan]

Спасибо.
А для tooltip как сделать? они тоже не работают.

Я думал может есть что-нибудь типа магического refreshDom() =(

[dmirogin]

Billy Milligan: https://stackoverflow.com/questions/9446318/bootst...

[Billy Milligan]

dmirogin: Но у меня и так есть:

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

[Billy Milligan]

Billy Milligan: Разобрался, добавил $('[data-toggle="tooltip"]').tooltip() в $.post($form.attr("action"), $form.serialize(), 'html').done() { ? }

Answer 2

[RidgeA]

1. Повесить событие на элемент более высокого уровня (который не удаляется) и по этому событию определять какой коммент надо удалить (по какому конкретному элементу был клик)
||
2. После добавления комментария добавлять обработчик события.

Answer 3

[Владимир]

Вот здесь самое понятное объяснени (Раздел "Прямая и делегированная обработка (параметр selector)"