jQuery插件与Knockout不兼容

我是Knockout的新手，但一直在使用jQuery。在我目前正在开发的一个项目中，我们使用了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插件将它们绑定到对象的单击事件上。

来源

2012-10-15 Knelis

你的代码适合我。这里是小提琴：http://jsfiddle.net/fGX3d/1/ –

对不起，是的，这工作。我更新了你的小提琴：http://jsfiddle.net/fGX3d/2/。点击隐藏的永远不会触发的'显示隐藏'链接和jQuery事件... – Knelis

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

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

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

来源

2012-10-15 12:42:57

非常感谢！ – Knelis

就像一个快速附录一样，jQuery已弃用'.live'而赞成使用['.on']（http://api.jquery.com/on/）和父选择器参数。 Artem的答案仍然有效，但这不是推荐的风格。因此，而不是'$（'a.alert'）。live（'click''）你会说'$（'body'）。on（'a.alert'，'click''。 – zetlen

引擎盖下，KnockoutJS认为with结合是template结合的一个特例！每当视图模型中的observable发生更改时，<div data-bind="with: dummyData">的每个后代都将被删除并重新创建，并且当这些DOM元素被删除时，您的jQuery处理程序也是如此。在高于模板绑定的级别使用.on是解决此问题的一种方法。尽管如此，Knockout click绑定似乎对我来说是更好的选择。

来源

2012-10-15 12:51:51 zetlen

谢谢，非常有帮助！ – Knelis

jQuery插件与Knockout不兼容

回答

相关问题