Custom Javascript not loded properly in magento2

Question

Custom Javascript is not working with infinite scroll or after applying some filters from shopping options

Working Fine with the first 12 products. but after applying some filters or working with the products after 12 it is not functioning.

Here is my JS code

require(['jquery'],
function($) {

    $(document).ready(function() {

        $('.compare_check').click(function() {
            alert('hello');
        });

    });
});

I am working with the custom Add to compare functionality !!

Answer 1

Try with the below code,

require(['jquery', 'domReady!'], function ($) {
    'use strict';
    $(document).on('click','.compare_check',function(){
         alert('hello')
    });
});

If still it is not working then check after applied the filter some other js is working so add this code with that function.

Answer 2

The problem is that .click only works for elements already on the page. You have to use something like on if you are wiring up future element.

require(['jquery'],
function($) {

    $(document).ready(function() {
        $("html").on("click",".compare_check", function(){
          alert("hello");
        });
    });
});