Pass function to click event jQuery

Question

I am just wondering what I need to do to pass the clickAssistanceToggle function to my jQuery click event, I have taken a look at some of the answers on here and can't find a simple solution to this.

So far I have this code:

  function clickAssistanceToggle() {
    $('.car-hub-header-help, #assistance-overlay, .assistance-close-btn').click(function(){
      $('#new-car-hub, #new-car-offer').toggleClass('assistance-active');
      $('#pulman-assistance').toggleClass('pulman-assistance-active').css("top", fixedPositionCalculator);
      $('#assistance-overlay').toggleClass('assistance-overlay-active');
      $('#new-car').toggleClass('assistance-active-body');
      $('#new-car-offer-cta').toggleClass('assistance-active-cta');
    });
  };
  $('.new-car-general-enquiry-btn').click(function(){
    clickAssistanceToggle();
  });

As you can see the function wont run like this because it hasn't been passed as a parameter, I have tried passing the function like so:

  $('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
    clickAssistanceToggle();
  });

However this does not seem to work, any idea how I can pass that function to the click event? Thanks

Apparently, your clickAssistanceToggle function is itself assigning a click handler to a bunch of other elements. Can you explain the intended purpose? — Lud
– Lud, Commented Jun 1, 2016 at 13:31
Are you sure your code is not working? The code in the first block has nothing blatantly wrong, the only problem is that it has no immediate visible effect. As it is, when the user clicks on .new-car-general-enquiry-btn the attached function is called and it attaches another click handler to other elements. The toggleClass methods are only executed when the user clicks on one of these elements .car-hub-header-help, #assistance-overlay, .assistance-close-btn. This said, the second block code of course is wrong. — Lud
– Lud, Commented Jun 1, 2016 at 13:41
Thanks your totally right, I guess I got a little confused and thought it was because the function wasn't being called. I didn't recognise that I was calling a function that contained a click event within a click function. — Nick Maddren
– Nick Maddren, Commented Jun 1, 2016 at 13:51
Ok then, now i'm confused... why did you mark as correct an answer that was pointing you in a wrong direction? — Lud
– Lud, Commented Jun 1, 2016 at 13:56

Anoop Joshi P · Accepted Answer · 2016-06-01 13:30:06Z

3

You can call like this,

 $('.new-car-general-enquiry-btn').click(clickAssistanceToggle);

Or

 $('.new-car-general-enquiry-btn').click(function(){
    clickAssistanceToggle();
  });

Also there is a chance that, .new-car-general-enquiry-btn element is not being rendered at the time of binding the event. If so you need to wrap the code inside dom ready event.

$(document).ready(function() {
  $('.new-car-general-enquiry-btn').click(function() {
    clickAssistanceToggle();
  });
});

answered Jun 1, 2016 at 13:30

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

Comments

Davide Lorenzo MARINO · Accepted Answer · 2016-06-01 13:32:21Z

0

Instead of

 $('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
    clickAssistanceToggle();
  });

You need to use

 $('.new-car-general-enquiry-btn').click(clickAssistanceToggle);

Basically you need to pass the function to be executed when a click is performed on a .new-car-general-enquiry-btn element.

answered Jun 1, 2016 at 13:32

Davide Lorenzo MARINO

27k4 gold badges45 silver badges58 bronze badges

Collectives™ on Stack Overflow

Pass function to click event jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related