jQuery 플러그인이 넉 아웃과 작동하지 않습니다.

Question

넉 아웃에 익숙하지 않지만 꽤 오랫동안 jQuery를 사용해 왔습니다. 현재 작업중인 프로젝트에서 Knockout 뷰 모델을 사용하고 있습니다.

그러나 우리는 탭, 오버레이 등에 대해서도 몇 가지 jQuery 플러그인을 사용합니다.이 모든 것은 KO를 사용하지 않거나 data-bind 인 컨테이너 외부에서 사용할 때 잘 작동합니다. 예를 들어, jQuery Tools의 Overlay 플러그인은 트리거가 KO에 바인드 된 컨테이너 안에있을 때 작동하지 않습니다. 자바 스크립트

<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> 

을 그리고 여기 :

여기에 트리거되지 않습니다 JQuery와 이벤트와 간단한 예제

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 플러그인과 함께 사용하려는 경우가 있습니다.

다음

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

하는 노력 바이올린 :

Answer 1

사용 jquery.live 이벤트를 클릭 바인딩 후드에서 http://jsfiddle.net/fGX3d/3/

Answer 2

을 KnockoutJS는 with 바인딩 template의 특별한 경우로 바인딩을 고려! <div data-bind="with: dummyData">의 모든 자손은 뷰 모델의 관찰 가능이 변경 될 때마다 삭제되고 다시 작성되며, DOM 요소가 삭제되면 jQuery 핸들러도 삭제됩니다. 템플릿 바인딩보다 높은 레벨에서 .on을 사용하면이 문제를 해결할 수 있습니다. Knockout click 바인딩은 나에게 더 나은 선택 인 것 같습니다.