jQuery 插件不能与 Knockout 一起使用

Question

我是 Knockout 的新手，但使用 jQuery 已经有一段时间了。在我目前正在进行的一个项目中，我们正在使用 Knockout 视图模型。

然而，我们也使用了一些 jQuery 插件用于选项卡、覆盖等。当不使用 KO 或在带有data-bind 的容器外部使用时，这些插件都可以正常工作。例如，当触发器放置在绑定到 KO 的容器中时，jQuery Tools 的 Overlay 插件将不起作用。

这是一个从未触发的 jQuery 事件的简单示例：

<div data-bind="with: dummyData">
    <a class="alert" href="#">Never fires!</a>
</div>
<div>
    <a class="alert" href="#">Works!</a><br /><br />
    <a href="#" data-bind="click: $root.showHidden">Show hidden link.</a>
</div>

这是 JavaScript：

var myViewModel = function () {
    var self = this;
    self.dummyData = ko.observable(false);

    self.showHidden = function () {
        self.dummyData(true);
    };
};

ko.applyBindings(new myViewModel());

$(document).ready(function () {
    $('a.alert').click(function () { alert('Clicked!'); });
});

KO 是用不同的内容替换第一个容器还是更新 DOM 使 jQuery 点击事件不再起作用？

我知道 KO 有自己的click: 事件。我经常使用它，但现在我只想知道是否仍然可以将点击事件与 jQuery 绑定，特别是因为我想将它与一些 jQuery 插件一起使用，这些插件将自身绑定到对象的点击事件上。

Answer 1

在底层，KnockoutJS 认为with 绑定是template 绑定的特例！ <div data-bind="with: dummyData"> 的每个后代都会在每次视图模型中的可观察对象发生更改时被删除和重新创建，并且当这些 DOM 元素被删除时，您的 jQuery 处理程序也会被删除。在高于模板绑定的级别上使用.on 是解决此问题的一种方法。不过，Knockout click 绑定对我来说似乎是一个更好的选择。

Answer 2

使用jquery.live绑定点击事件：

$(document).ready(function () {
    $('a.alert').live('click', function () {
        alert('Clicked!');
    });
});

这是工作小提琴：http://jsfiddle.net/fGX3d/3/