Why my `onclick` doesn't work despite others things works?

Question

So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.

The problem is with this method:

$(document).ready(function() {
  console.log("custom.js inside document ready");


    $('.collapse-link').on('click', function() {
        console.log("clicked on a collapse-link");

        var $BOX_PANEL = $(this).closest('.x_panel'),
            $ICON = $(this).find('i'),
            $BOX_CONTENT = $BOX_PANEL.find('.x_content');

        // fix for some div with hardcoded fix class
        if ($BOX_PANEL.attr('style')) {
            $BOX_CONTENT.slideToggle(200, function(){
                $BOX_PANEL.removeAttr('style');
            });
        } else {
            $BOX_CONTENT.slideToggle(200);
            $BOX_PANEL.css('height', 'auto');
        }

        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $('.close-link').click(function () {
        console.log("close-link clicked")
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
    });
});

It write "custom.js inside document ready" but when I click nothing happened.

And if I look into the HTML I have the same classes as in the JS:

Answer 1

You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to

$('.collapse-link').on('click', function(e) { 
    e.preventDefault();
    console.log("clicked on a collapse-link");

        var $BOX_PANEL = $(this).closest('.x_panel'),
            $ICON = $(this).find('i'),
            $BOX_CONTENT = $BOX_PANEL.find('.x_content');

        // fix for some div with hardcoded fix class
        if ($BOX_PANEL.attr('style')) {
            $BOX_CONTENT.slideToggle(200, function(){
                $BOX_PANEL.removeAttr('style');
            });
        } else {
            $BOX_CONTENT.slideToggle(200);
            $BOX_PANEL.css('height', 'auto');
        }

        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

And

$('.close-link').on('click', function(e) { 
    e.preventDefault();
    console.log("close-link clicked")
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
});

Answer 2

it might be that on document ready these specific elements are not found. In general a best practice is to delegate the events to the document, like this:

$(document).ready(function() {
  console.log("custom.js inside document ready");


    $(document).on('click', '.collapse-link' /* <--- notice this */, function() {
        console.log("clicked on a collapse-link");

        var $BOX_PANEL = $(this).closest('.x_panel'),
            $ICON = $(this).find('i'),
            $BOX_CONTENT = $BOX_PANEL.find('.x_content');

        // fix for some div with hardcoded fix class
        if ($BOX_PANEL.attr('style')) {
            $BOX_CONTENT.slideToggle(200, function(){
                $BOX_PANEL.removeAttr('style');
            });
        } else {
            $BOX_CONTENT.slideToggle(200);
            $BOX_PANEL.css('height', 'auto');
        }

        $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $(document).on('click', '.close-link' /* <--- notice this */, function () {
        console.log("close-link clicked")
        var $BOX_PANEL = $(this).closest('.x_panel');

        $BOX_PANEL.remove();
    });
});