javascript - 带有 jquery 事件的 knockout 列表

Question

为什么当我改变它们的值时事件没有发生在项目上？

$(".target").change(function () {
  alert($(".target").val());
});

function MyViewModel() {
  var self = this;
  self.items = ko.observableArray();
  self.items.push({ name: 'Jhon' });
  self.items.push({ name: 'Smith' });
}

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<h2>Index</h2>

<table>
  <thead>
    <tr>
      <th>Passenger name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td><input class="target" data-bind="value: name" /></td>
    </tr>
  </tbody>
</table>

Answer 1

Knockout 在应用 foreach 绑定(bind)时生成新的 html，所以你需要注册你的 event在全局范围内，就像选项 1 一样，或者您可以像选项 2 中那样进行 knockout 的 neet 绑定(bind)。我推荐选项 2 使用 knockout 绑定(bind)。

$(document).on('change',".target",function () {
  alert('option 1 - ' + $(this).val());
});

function MyViewModel() {
    var self = this;
    self.items = ko.observableArray();
    self.items.push({ name: 'Jhon' });
    self.items.push({ name: 'Smith' });
    self.alert = function(data, e){
    alert('option 2 - ' + data.name);
  };
}

ko.applyBindings(new MyViewModel(), document.getElementById('tblSample'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<h2>Index</h2>

<table id="tblSample">
  <thead>
    <tr>
      <th>Passenger name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td><input class="target" data-bind="value: name, event:{change:$parent.alert}" /></td>
    </tr>
  </tbody>
</table>