How to make events created from append work after json response?

Question

I'm practically using this code, if you click the X button it closes, it hides: https://jsfiddle.net/pkLj6fst/5/

The only difference is that apart from the .loads of my code is that I am getting response from PHP in json format:

$(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");
        })
    });
});

In conclusion in created element: $(".alert-success").append("<button class='close' type='button'><span aria-hidden='true'>×</span></button>"); it does not work, that is, when I click the X button it does not close, it does not hide.

I have reviewed the following sources: https://learn.jquery.com/events/event-delegation/

But nothing, I have tried in various ways and, I can not hide it, please can you help me, explain how to solve this problem, thank you.

`$(document).on('click', '.close', function(event){ event.preventDefault(); $('.alert-success').fadeOut(500); }); ` is event delegation and should work — mplungjan, Jul 03 '21 at 20:38
Do you have a web site? Also what is `$("#qty").load(" #qty").fadeIn();` supposed to do — mplungjan, Jul 03 '21 at 20:44
@mplungjan I have also applied these attempts: https://jsfiddle.net/1s7hwot9/1/ and, all the examples of the question you have linked by closing my question. — , Jul 03 '21 at 20:51
@mplungjan This `$("#qty").load(" #qty").fadeIn();` what it does is show when items have the cart without reloading the page, what it does is update a specific container. — , Jul 03 '21 at 20:52
@mplungjan Errors in console does not show me friend, even for testing remove the `.load` but still does not work — , Jul 03 '21 at 20:53
If I test the code this way it works: https://jsfiddle.net/1s7hwot9/1/ So the problem seems to be this: `$('.alert-success').html(res.message).delay(8000).fadeOut(8000);` when receiving the message from json it causes something and this does not let it work. — , Jul 03 '21 at 20:58
@mplungjan If you can and when you have time you can test my code, you just need to add this `https://ideone.com/E4SG5Y` in the php file and the layout styles are here: `https://jsfiddle.net/doa4kw15/` — , Jul 03 '21 at 21:01

score 0 · Accepted Answer · answered Jul 04 '21 at 06:37

0

Your button fadeout is interfering with the already requested fadeout

Change to

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

DEMO

answered Jul 04 '21 at 06:37

mplungjan

169,008
28
173
236

1

Trying so many methods and, it was just to change the fadeOut () thanks, I spent a whole day trying so many things. – Jul 04 '21 at 14:23
Not an obvious issue – mplungjan Jul 04 '21 at 14:37
I'm sure it will help others at some point, since I even used remove (), but hey that's it :) Greetings. – Jul 04 '21 at 15:56

How to make events created from append work after json response?

1 Answers1