敲除呈现链接，单击处理程序问题答案

【问题标题】：Knockout rendered link, click handler issue敲除呈现链接，单击处理程序问题
【发布时间】：2014-12-24 09:51:54
【问题描述】：

让我们谈谈代码：

<div class="alert alert-info" role="alert" title="Shows player rankings">                
            <ul class="nav nav-pills" data-bind="foreach: userRanks">
                <!-- ko if: ($index() === 0) -->
                <li>
                    <a href="#" class="btn btn-default" title="Refresh ranks"><i class="glyphicon glyphicon-refresh"></i></a>
                </li>
                <!-- /ko -->
                <li>
                    <a href="#" data-bind="attr: { title: $data.rank}">
                        <!-- ko text: $data.username --><!-- /ko -->
                        <span class="badge" data-bind="text: $data.score"></span>
                    </a>
                </li>
                <!-- ko if: ($index() === ($parent.userRanks().length - 1)) -->
                <li class="pull-right">                        
                    <a href="javascript:void(0)" id="btnPush" class="btn btn-default" data-url="@Url.Action("PushPlayerinfo", "Home")">Update score</a>
                </li>
                <li class="pull-right" data-bind="attr: {title: $parent.currentUserName}">
                    <a href="#">You <span class="badge" data-bind="text: $parent.currentUsertotalScore"></span> / <span data-bind="text: $parent.currentUserRank"></span></a>
                </li>
                <!-- /ko -->
            </ul>
</div>

我已将点击处理程序注册为将“btnPush”链接为：

$("#btnPush").on('click', function () {
//My code
});

仅使用淘汰赛 foreach 控件、虚拟元素和上下文，不知道我缺少什么，但以这种方式单击此链接的从不注册。内联 Html onClick() 可以工作：

<a href="javascript:void(0)" onclick="pushData(this);" id="btnPush" class="btn btn-default" title="Click to persist current score" data-url="@Url.Action("PushPlayerinfo", "Home")">Update score</a>

另外，如果相同的链接在 ul-container 之外（在 foreach 绑定之外），它可以正常工作。有人可以推荐我吗？

【问题讨论】：

因为你的元素是动态生成的，你应该使用委托事件，在 jquery doc中有很好的记录。
如果您仍然使用淘汰赛，为什么不使用它来为您处理点击事件？
@nemesv 好评论。我什至会说这可能是一个答案，如果不是针对 OP，那么对于最终通过搜索查询解决这个问题的人。当使用 KO 时，click binding 就是为了这个任务。
感谢 nemesv，太棒了！建议。我试试看。
一个好的经验法则是，如果您使用 $('') 访问 KO 视图中的 DOM 元素，您可能需要自定义绑定。但是，通过给出这个示例，您可以在 viewmodel 中编写 click 方法，因为 knockout.js 为您提供了开箱即用的 click 事件绑定。尝试并避免在您的视图模型中进行任何类型的直接 DOM 操作，无论是 jQuery 还是任何其他类型的 javascript 框架。 MVVM 的要点之一是让您的视图模型与您的视图完全解耦，这就是自定义绑定可以为您提供的帮助。

标签： jquery html asp.net-mvc razor knockout.js

【解决方案1】：

您应该使用敲除处理单击事件。使用敲除时使用 jQuery 处理 DOM 是一种不好的做法，如果使用 ko 点击绑定也会很容易。

查看文档：http://knockoutjs.com/documentation/click-binding.html

*如果你需要在 ko foreach 中运行一个方法，并且这个方法属于 VM，记得使用 $parent 或 $root 键。

<ul data-bind="foreach: items">
  <li>                        
    <a data-bind="click: $parent.yourMethod()>link</a>
  </li>
</ul>

【讨论】：