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

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 (or alternatively 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 （自定义绑定除外处理程序和渲染后函数）。

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

Bind click event to selector with knockout

javascript

jquery

knockout.js

jquery-events