from this link I learned how to get index of the clicked element in knockout. but I want to get data and event with it.

for data I did something like this and this worked:

var vmodel = {
    listItems: ko.observableArray([
        {title: "Able"},
        {title: "Baker"},
        {title: "Charlie"}]),
    itemClicked: function(data,index) {
        alert(data);
        alert(index);
    }
};
ko.applyBindings(vmodel);​

<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked.bind($data, $data, $index())">
         <p data-bind="text: title"></p>
    </li>
</ul>

but I don't know how to access event.

Thanks

from this link I learned how to get index of the clicked element in knockout. but I want to get data and event with it.

for data I did something like this and this worked:

var vmodel = {
    listItems: ko.observableArray([
        {title: "Able"},
        {title: "Baker"},
        {title: "Charlie"}]),
    itemClicked: function(data,index) {
        alert(data);
        alert(index);
    }
};
ko.applyBindings(vmodel);​

<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked.bind($data, $data, $index())">
         <p data-bind="text: title"></p>
    </li>
</ul>

but I don't know how to access event.

Thanks

• javascript
• jquery
• knockout.js
• click

4 Answers 4

Put one more argument to receive in the function and that will contain the event details Jsfiddle:- https://jsfiddle/31unkhxm/8/

  itemClicked: function(data,data,index,event) {
        console.log("d is"+event.currentTarget);
    }

From KO documentation

http://knockoutjs./documentation/click-binding.html

In some scenarios, you may need to access the DOM event object associated with your click event. Knockout will pass the event as the second parameter to your function

In your scenario you are binding data,data,index and so the last param will be event

You may be better off using the delegated handler: https://github./rniemeyer/knockout-delegatedEvents/

that way you can attach one event handler to the root node and the arguments that gets passed into your viewmodel function is the data you need (first param is the object and second is the event).. Plus the scope of 'this' will be correct.

I pretty much only use the event delegation as everything just works as I expect.

I have seen that this question has been replied, but I would like to share a different approach that could help someone: Instead of passing the $index as a parameter to the click function, you can do something different from inseide the function itself:

you can use:

var context = ko.contextFor(event.target);

in this way you can access the full context. Accessing the $index is now simple:

var index = context.$index();

so the full reply is:

this.onClick = function (data, event) {
        var context = ko.contextFor(event.target);
        var index = context.$index();

    }

I agree with Magrangs that event delegation would be superior in this case, but if you are set on using this pattern you could do this:

<ul data-bind="foreach: listItems">
  <li data-bind="click: $parent.itemClicked.bind($data, $index())">
         <a data-bind="text: title"></a>
  </li>
</ul>

var vmodel = {

    listItems: ko.observableArray([
        {title: "Able"},
        {title: "Baker"},
        {title: "Charlie"}]),

    itemClicked: function(index) {
        console.log(event);
        console.log(this);
        console.log(index);       
    }

};

ko.applyBindings(vmodel);

Depending on what you are trying to achieve (triggering another action), maybe a subscription to the observable would be helpful like this:

myViewModel.personName.subscribe(function(newValue) {
  alert("The person's new name is " + newValue);
});

I would also use anchor tags over P tags for accessibility reasons.

Good Luck!