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不兼容

回答

相關問題