Knockout - Getting clicked element

Question

I have the following mark-up:

<fieldset>    <div>        <label class="editor-label">Question 1?</label>        <input type="text" class="editor-field" />             <button type="button" data-bind="click: helpClicked">Help</button>        <p class="help">Help 3</p>    </div>     <div>        <label class="editor-label">Question 2?</label>        <input type="text" class="editor-field" />        <button type="button" data-bind="click: helpClicked">Help</button>        <p class="help">Help 3</p>    </div>    <div>        <label class="editor-label">Question 3?</label>        <input type="text" class="editor-field" />         <button type="button" data-bind="click: helpClicked">Help</button>        <p class="help">Help 3</p>    </div> </fieldset> 

I want to toggle the visibility of the the <p> with the class help in the same Div as the clicked button. I am trying to use $(this) to determine which button was clicked and then I could get the correct "help" element from there.

The problem is that $(this) isn't returning the clicked button.

At the moment I am trying to simply hide the clicked button like:

var viewModel = {     helpClicked: function () {         $(this).hide();                } };  ko.applyBindings(viewModel); 

This doesn't work. Can anyone help please?

Answer 1

Here is a jsFiddle with one possible solution:

http://jsfiddle.net/unklefolk/399MF/1/

You can target the DOM elements you want via this syntax:

var viewModel = {          helpClicked: function (item, event) {            $(event.target).hide();          $(event.target).next(".help").show()                 }  };   ko.applyBindings(viewModel); ​