How to call a function from click event inside another click event function?

Question

I have 2 functions that triggers when an element is clicked. However, i want to use the first function that should be executed in another function via click event. I am still a newbie.

I already tried calling the function and declaring the function name inside the other function where i want it to be executed. Is it not working because the first function can only be triggered vie click event on its element? I also nested the click event on a function but it didn't work as well.

$(document).ready(function()
function toggleMenuClick(){

$('.menu-link').click(function (normal){
    normal.preventDefault();
    $('.menu-link').toggleClass('close');
    $('.overlay-menu').toggleClass('active');
    $('.menu-link').toggleClass('fixed');
    $('nav ul').toggleClass('show');
    $('nav ul li').toggleClass('fade-in');
    $('body').toggleClass('min-height');

    if ($(window).scrollTop() <= 99){
        $('.menu-link').toggleClass('white');
    }
});

}

toggleMenuClick();

$('.scroll-link').click(function(navigate){
   navigate.preventDefault();
      $("html, body").animate({
      scrollTop: $(this.hash).offset().top
      }, 700);
toggleMenuClick();
});
});

I want all the classes from toggleMenuClick to be toggled when .scroll-link is clicked as well.

Do not create event listeners in other event listeners. This leads to duplicate event listener creations, and the chances of creating conflicts with the logic stepping on itself is very high. Best case scenario you will be performing the same work multiple times. Worst case scenario, it stops working. — Taplar
– Taplar, Commented Apr 12, 2019 at 21:46
Actually worst case scenario is it works some times and not others, and then it's a debugging nightmare to figure out why. — Taplar
– Taplar, Commented Apr 12, 2019 at 21:48
It was the last resort that I thought of but apparently was logically wrong. — Lisandro
– Lisandro, Commented Apr 12, 2019 at 21:50

frodo2975 · Accepted Answer · 2019-04-12 21:48:45Z

2

You need to make toggleMenuClick a separate function, outside your click handlers, so that you can call it independently.

It would look something like this:

var toggleMenuClick = function() {
    // Do classes stuff...
}


$('.menu-link').click(function(e) {
    e.preventDefault();
    toggleMenuClick();
});

$('.scroll-link').click(function(e){
    // Do stuff...

    // Now you can call your function
    toggleMenuClick();
});

answered Apr 12, 2019 at 21:48

frodo2975

12k5 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lisandro Over a year ago

thanks for this input. can i just name the function and call it instead of storing it in a variable?

frodo2975 Over a year ago

Yup, you can do that like function toggleMenuClick() {. The only difference is if you do it that way, it's accessible before it's declared, via the magic of hoisting. Depends what you want.

Collectives™ on Stack Overflow

How to call a function from click event inside another click event function?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related