Custom jQuery events (Click, Resize, Show, Hide, etc.) with and without Breeze experience.

[rutulritz]

Hi,

I want to use click and other events with and without breeze experience. I added one script for click event and it is working fine in breeze enabled page as below:

$(document).on('breeze:load', function () {
        $('#kanmo-mc-search-btn').on('click', function () {
            $('.kanmo-middle-header').addClass('open-search');
        })
});

The same script is not working on my Cart page where breeze is disabled.
Can you please guide me to add script for both pages, with and without breeze? I want it in single file without duplicating same script.

Thanks.

[vovayatsyuk]

1. You can move the main logic outside of the listener:

   const fn = () => {}
   
   $(document).on('breeze:load', fn);
   if (!$.breeze) fn();

2. Or, you can use event delegation and add listeners to the document (no need to use load in this case):

   $(document).on('click', '#kanmo-mc-search-btn', () => {})

[rutulritz]

Its working. thanks @vovayatsyuk
How to use toggleClass in breeze ? below logic is not working for me

$(document).on('click', '#search_mini_form', function () {
$(this).toggleClass('active');
$('#search-cancel-mob').css('display', 'inline-block');
});

[vovayatsyuk]

active class is used by breeze widget and your code conflicts with breeze js.

Choose another class name.