Почему не работает .click() на вставленом через .append() html коде? [дубликат]

290

13 ноября 2017, 20:48

На данный вопрос уже ответили:

Как использовать плагины jquery с динамическим контентом или почему после AJAX отваливается javascript 1 ответ

Клонирую форму для комментариев при помощи jquery, в форме есть кнопка для того что бы отменить(удалить форму), но на клонированной форме .click() не работает.

Сталкивался ли кто то с подобным? и как можно решить эту проблему?

var commentForm = $(".comments-form-reply").clone();
$(".comments-item-button-reply").click(function () {
    var commentId = $(this).closest(".comments-item").attr("id");
    var commentIdValue = Number(commentId.split('-').slice(1));
    $(".form-reply-js").remove();
    $("#" + commentId).append(commentForm);
    $("#" + commentId + " .comments-form-reply").addClass("form-reply-js");
    $("#" + commentId + " .comments-form-reply form").append('<input class="form-reply-js" type="hidden" name="parent_id" id="id_parent_id" value="' + commentIdValue + '">');
});
$(".btn-comment-reply-cancel").click(function () {
    $(".form-reply-js").remove();
    alert('work');
});

Answer 1

Используйте подобную конструкцию:

$('body').on('click', '.comments-item-button-reply', function () { /* ... */ });

В данном случае все события клика будут слушаться на родительском элементе body, а потом уже будет идти проверка, что событие клика пришло именно на элемент .comments-item-button-reply.

Я рекомендую вам ради оптимизации заменить в моем примере body на более близкого родителя к вашему селектору, например, на обёртку блока комментариев.