如何让append创建的事件在json响应后工作？

Question

我实际上是在使用这个代码，如果你点击X按钮，它就会关闭，它会隐藏起来：https://jsfiddle.net/pkLj6fst/5/

唯一的区别是，除了我的代码的.loads之外，我从PHP得到的响应是json格式的：

$(function() {
    $(document).on('click', '.close', function(event){
        event.preventDefault();
        $('.alert-success').fadeOut(500);
    });

/*$('.alert-success').on('click', 'button', function(event){
    event.preventDefault();
    $('.alert-success').fadeOut(500);

});*/

    $(document).on('click', '.addCard', function(e){
        e.preventDefault();
        var itemId = $(this).attr("id");
        $.ajax({
            url:"add_item.php",
            method:"POST",
            data:{itemId:itemId},
        })
        .done(function(data){
            let res = JSON.parse(data);
            if(res.status){
                $("#wrapp-basket").load(" #wrapp-basket").fadeIn();
                $("#addCard").load(" #addCard").fadeIn();
                $("#qty").load(" #qty").fadeIn();
                $('.alert-success').fadeIn();
                $('.alert-success').html(res.message).delay(8000).fadeOut(8000);
                $(".alert-success").append("<button class='close' type='button'><span aria-hidden='true'>×</span></button>");
            } else {
                $('.alert-danger').fadeIn();
                $('.alert-danger').html(res.message).delay(8000).fadeOut(8000);
            }

            console.log(data);
        })
        .fail(function( jqXHR, textStatus ) {
            alert("Ajax Request fail");
        })
    });
});

总之，在created element：$(".alert-success").append("<button class='close' type='button'><span aria-hidden='true'>×</span></button>");中，它不工作，也就是说，当我单击X按钮时，它不会关闭，也不会隐藏。

我回顾了以下来源：https://learn.jquery.com/events/event-delegation/

但是什么都没有，我已经尝试了各种方法，我不能隐藏它，请你帮我，解释一下如何解决这个问题，谢谢。

Answer 1

您的按钮淡出正在干扰已请求的淡出

更改为

$(document).on('click', '.close', function(event){
    event.preventDefault();
    $('.alert-success').hide();
});

DEMO