CODEWITHSUNDEEP
javascripthtmlknockout.js
marked-down
marked-down

Reputation: 10408

Multiple click binding on element only executes one in knockout.js?

I have a dropdown menu which when clicked, should both open a modal dialog and close the dropdown menu. I have stored this functionality within two separate functions, like so:

self.toggleDropdownVisibility = function () {
    self.showDropdown(!self.showDropdown());
};

// and

self.toggleModalVisibility = function () {
    self.showModal(!self.showModal());
};

With my HTML being:

<li data-value="manage" data-bind="click: toggleModalVisibility, click: toggleDropdownVisibility">

The problem is however, when I use this syntax, only the first function is executed (in this case, toggleModalVisibility), and if I reverse the order, toggleDropdownVisibility is called. How can I bind two click events to a single element and have them both execute?

Upvotes: 2

Views: 4292

Answers (1)

Michael Fry
Michael Fry

Reputation: 1090

Add an "onClick" function to your model and point your declarative click binding to that, then call the two functions you would like to call from the onClick function.

Javascript:

self.toggleDropdownVisibility = function () {
    self.showDropdown(!self.showDropdown());
};

self.toggleModalVisibility = function () {
    self.showModal(!self.showModal());
};

self.onClick = function () {
    self.toggleDropdownVisibility();
    self.toggleModalVisibility();
};

Html:

<li data-value="manage" data-bind="click: onClick">

Upvotes: 2

Related Questions