JQuery call multiple functions inline

Question

Here's my relevant code:

var dropdown = {
  init: function() {
    $(".dropdown").click(".dropdown", dropdown.openDropdown, dropdown.secondFunction);
  },  
  openDropdown: function() {
    ...
  }
}

How can I call multiple functions on the click event? I added what I tried to do above.

EDIT:

So this is my new code with your guys help, and I can confirm both functions are being called because when I put alerts in they both trigger, but for some reason the code inside openDropdown right now isn't working. Is it because my $(this) references are off or something?

var dropdown = {
  init: function() {
    $(".dropdown").click(".dropdown", function() { dropdown.openDropdown(); dropdown.closeDropdowns(); });
  },
  openDropdown: function() {
    $(this).children(".dropdown-menu").show();
    $(this).addClass("open");
  },
  closeDropdowns: function() {
    //$(".open").removeClass(".open");
    //$(".open").children(".dropdown-menu").hide();
  }
}

$(".dropdown").click(".dropdown", ...); isn't right.

Bill Criswell
– Bill Criswell

2014-05-23 16:42:26 +00:00
Commented May 23, 2014 at 16:42 — Bill Criswell
– Bill Criswell, Commented May 23, 2014 at 16:42

Matas Vaitkevicius · Accepted Answer · 2014-05-23 16:26:31Z

2

like this:

var dropdown = {
  init: function() {
    $(".dropdown").click(".dropdown", function(){ this.openDropdown(); this.secondFunction()});
  },  
  openDropdown: function() {
...
  }
}

answered May 23, 2014 at 16:26

Matas Vaitkevicius

61.9k37 gold badges253 silver badges278 bronze badges

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

5 Comments

sir_thursday Over a year ago

So will the .dropdown piece inside the click handler be passed to both functions?

Matas Vaitkevicius Over a year ago

on click 'this' will be element that event was invoked so yes '.dropdown'

Bill Criswell Over a year ago

Wouldn't this be the .dropdown element and not the dropdown variable?

sir_thursday Over a year ago

Yeah-- I'm confused what this is and also what the .dropdown being passed in the click event is. Sorry...

Bill Criswell Over a year ago

this in the click event is the element. this in the scope of init would be dropdown itself.

Bill Criswell · Accepted Answer · 2014-05-23 16:44:46Z

1

You can do:

$('.dropdown').on('click', function () {
  dropdown.openDropdown();
  dropdown.secondFunction();
});

If you want this inside of openDropdown and secondFunction to be the element you would need to use .call.

var dropdown = {
  init: function() {
    $(".dropdown").on("click", function () {
      // The call makes `this` the element in the functions...
      dropdown.openDropdown.call(this);
      dropdown.secondFunction.call(this);
    });
  },  
  openDropdown: function() {
    console.log('openDropdown', this);
  },
  secondFunction: function() {
    console.log('secondFunction', this);
  }
};

dropdown.init();

edited May 23, 2014 at 16:44

answered May 23, 2014 at 16:26

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

1 Comment

sir_thursday Over a year ago

Thank you so much Bill... I've never heard of that .call function, I'll read up on it.

mohamedrias · Accepted Answer · 2014-05-23 16:33:49Z

1

var dropdown = {
  init: function() {
    $(".dropdown").click(".dropdown", function() {dropdown.openDropdown(); dropdown.secondFunction(); 
  });
  },
  openDropdown: function() {
     // first function callback
       },
  secondFunction: function()   {
    // second call back 
  }
};

dropdown.init();

DEMO

answered May 23, 2014 at 16:33

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Collectives™ on Stack Overflow

JQuery call multiple functions inline

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related