Alex Rivera | Logout

Knockout - Getting clicked element

Asked 2012-07-09T09:02:02.160
36

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?

Edit
Report

1 Answer

14

Try using event.currentTarget followed by next()

$(event.currentTarget).next().hide();   

Working example here

answered 2012-07-09T09:05:18.527

Your Answer