when scroll down, data is loaded by ajax but click trigger is not working jquery

Question

i face a problem of jquery click function when i scroll down in list.

1. in list, data is loaded by ajax request and when i scroll down then click function (trigger) is not working.
2. when i not scroll down, ajax data is not loaded then click function is working.

i'm confuse why this happened. i used following triggers below but not success.

1. on()
2. click()
3. bind()
4. load()
5. delegate()

i'm sending you code. this is code below. Please help me to sort out.

$(window).ready(function(){ $(".like").on("click", function(){

        var id = $(this).attr('data');
        // alert(id);

        $.ajax({
            url: "/stores/addLike",
            type: 'GET',
            data: {
                id: id
            },
            error: function (data) {
               console.log(data);
            },
            success: function (data) {
                console.log(data);
                if(data == "liked"){
                    alert('Sorry, you have already liked this beat.');
                }else if(data == "notlogin"){
                    alert('Please login first to like a beat.');
                    window.location = "https://demo.amplifihub.com/login";
                }else{
                $(".likes"+id).text(data);
                }
            }
        });
    });
});

Answer 1

instead of $(".like").on("click", function(){ }); use $(document).on("click", ".like", function(){}); or use any static parent dom element to preserve the DOM event. I believe you are generating .like class element on scroll ajax call.