将点击事件绑定到带有敲除的选择器

Question

我已经搜索并尝试了不同的选择器，但我无法弄清楚这一点。我正在关注一个教程，但我没有得到结果。

click 事件似乎没有绑定到动态生成的div 部分'.person-brief'？没有与之关联的click 事件。我也试过.live()，但这似乎已被弃用。

知道我做错了什么吗？

person.js 模型

var gotoDetails = function (selectedPerson) {
    if (selectedPerson && selectedPerson.id()) {
        var url = '#/persondetail/' + selectedPerson.id();
        router.navigateTo(url);
    }
};

var viewAttached = function (view) {
    bindEventToList(view, '.person-brief', gotoDetails); 
};

var bindEventToList = function (rootSelector, selector, callback, eventName) {
    var eName = eventName || 'click'; 
    $(rootSelector).on(eName, selector, function () { 
        var ser = ko.dataFor(this); 
        callback(ser);
        return false;
    });
};

var vm = {
    people: people,
    title: 'people demo',
    viewAttached: viewAttached
};
return vm;

person.html 视图

<section id="person-view" class="view">
    <header>
        <a class="btn btn-info btn-force-refresh pull-right"
           data-bind="click: refresh" href="#"><i class="icon-refresh"></i>Refresh</a>
        <h3 class="page-title" data-bind="text: title"></h3>
        <div class="article-counter">
            <address data-bind="text: people().length"></address>
            <address>found what</address>
        </div>
    </header>
    <section  class="view-list" data-bind="foreach: people">
        <article class="article-left-content">
            <div class="person-brief" title="Go to person details">
                <small data-bind="text: firstname" class="right"></small>
                <small data-bind="text: lastname"></small>
            </div>
        </article>
    </section>
</section>

Answer 1

对于 KnockoutJS，您应该使用 the click binding（或 the event binding），而不是使用 jQuery 手动操作 DOM。

这样的东西会变成你的代码：

var vm = {
    people: people,
    title: 'people demo',
    viewAttached: viewAttached
};

vm.myHandler = function (person) { 
  goToDetails(person);
  return false;
};

由于myHandler 如此简单，您不妨内联goToDetails 代码，该代码可以通过闭包访问vm。

你像这样在视图中绑定：

<div class="person-brief" data-bind="click: $root.myHandler">
...
</div>

一般提示：做一个关于或者 jQuery，或 KnockoutJS 的教程。如果你选择后者，尽量少使用 jQuery（这通常是很有可能的），最值得注意的是不要使用 jQuery 来操作 DOM（自定义绑定处理程序和渲染后函数除外）。