AJAX call working initially, but when you send another nothing happens

Question

The below code works fine, independently. Meaning, if I come to the page and smash the like button it will function correctly and display the unlike button. However, if I immediately click the unlike button following that, nothing will happen. I will have to refresh the page and functionality will resume. Am I missing a crucial step here or is my logic flawed?

        $(document).ready(function(){
            var content = <?php echo $content['id']; ?>;
            user = <?php echo $user['id']; ?>;

            $('.like').on('click', function(e){
                e.preventDefault();
                $.ajax({
                    url: 'ajax.php',
                    type: 'post',
                    data: {
                        'content': content,
                        'user': user,
                        'like': 1
                    },
                    success: function(response){
                        $(".like").replaceWith( "<a href='#' class='btn btn-sm btn-danger rounded-pill unlike' data-id='<?php echo $content['id']; ?>'><i class='fas fa-skull'></i> Boo!</a>" );
                    }
                });
            });

            $('.unlike').on('click', function(e){
                e.preventDefault();
                $.ajax({
                    url: 'ajax.php',
                    type: 'post',
                    data: {
                        'content': content,
                        'user': user,
                        'unlike': 1
                    },
                    success: function(response){
                        $(".unlike").replaceWith( "<a href='#' class='btn btn-sm btn-success rounded-pill like' data-id='<?php echo $content['id']; ?>'><i class='fas fa-heart'></i> Woo!</a>" );
                    }
                });
            });
        });

Thanks. I'd try and make it reload or redirect after each click pressed. I am not a JS/Ajax guy, but that seems like it would work. @CoryAllen — Funk Forty Niner, Dec 04 '19 at 16:50
I believe the problem here is the DOM not knowing the existence of the element, you could try instead by having both elements created from the very begging and show/hide them as needed but I could be wrong, has been a long time since I touched something frontend related — ReynierPM, Dec 04 '19 at 16:51
Because you're creating the elements dynamically. When you click "like" it replaces it with an "unlike" button - however your events are already wired up. When you call `$(".class").click` it **only applies to elements that exist at that time**. You can either re-wire the event or use event delegation: `$(document).on("click", ".unlike"...` — freedomn-m, Dec 04 '19 at 17:03
@Dan Hoover It’s returning an int. This was fixed by using freedomn-m’s suggestion. — Cory Allen, Dec 04 '19 at 19:37

AJAX call working initially, but when you send another nothing happens

0 Answers0