javascript - ObservableArray.push() 触发点击事件

Question

我正在制作一个可搜索的对象(学生)列表。当我将对象附加到列表时，我还想添加单击事件处理程序，它将向我传递对象 ID。

我制作了一个可观察数组:

<script>
self.studentList = ko.observableArray();

// (...) if search conditions are met, add student to array
self.studentList.push(singleStudent);

</script>

它是 html:

<tbody data-bind="foreach: studentList">
<tr>
    <td><span data-bind='text: $data.Name, click: ClickEvent($data.Id)'></span></td>
</tr>

以及应在点击时触发的功能:

<script>
    function ClickEvent(pId)
    {
        console.log(pId);
    }
</script>

点击本身工作正常。问题是，self.studentList.push(singleStudent) 行也会触发该事件。

如何添加只有在点击元素时才会触发的事件？

Answer 1

您没有正确连接您的 click 处理程序，因为您没有传递对函数的引用，而是传递实际执行的结果。

在其当前形式中，每次解析绑定(bind)时都会执行 ClickEvent，例如当您向阵列添加新项目时。

要修复它，你需要将它包装成一个匿名函数

<td>
  <span data-bind='text: $data.Name, click: function() { ClickEvent($data.Id) }'></span>
</td>

或者您可以使用 bind function :

<td>
  <span data-bind='text: $data.Name, click: ClickEvent.bind($data, $data.Id)'></span>
</td>

另请参阅文档:Accessing the event object, or passing more parameters