Click bind executing automatically in Knockout Foreach

Question

I have included one click binding inside a foreach loop like the following:

    <tbody data-bind="foreach: locationConfigSet">
         <tr>
          <td data-bind="text: address"></td>
          <td><a data-bind="attr: {href: 'http://maps.google.com/maps?z=12&t=m&q=loc:' + latitude + '+' + longitude}" target="_blank" class="btn btn-primary btn-xs">Map</a></td>
          <td data-bind="text: allowance"></td>
          <td><button class="btn btn-danger btn-xs" data-bind="click: $parent.deleteconfig($data)">Delete</button></td>
         </tr>
    </tbody>

But the function deleteconfig is getting executed as soon as the page is loading (without click) in a loop untill its executed for the exact same times as the foreach loop executes.

Answer 1

indeed, you need to bind the function.

data-bind="click: $parent.deleteconfig($data)"

invokes the function straightforward.

You can instead use:

data-bind="click: $parent.deleteconfig.bind($parent, $data)"

as explained here

See this snippet :

var elementVM = function(id) {
  this.id = ko.observable(id);
}

var parentVM = function() {
  this.list = ko.observableArray([new elementVM(0), new elementVM(1)]);
  this.onclick = function(text) {
    text(text() + 1);
  }
}

ko.applyBindings(new parentVM());

.child {
  width: 50px;
  text-align: center;
  border: 1px solid black;
  background-color: yellow;
  cursor: pointer;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: list">
  <div class="child" data-bind="click: $parent.onclick.bind($parent, $data.id), text: id"></div>
</div>