2012-09-04 2 views
3

기존의 과다한 페이지에 선행 지원을 추가하려고합니다. 타입 어 헤드 기능은 입력 항목에 한 번만 첨부 할 수있는 것만 큼 효과가 있습니다.jQuery 부트 스트랩 - 이벤트가 입력에서 제거 된 후 선제지 업데이트하기

간단하게하기 위해 특정 작업 후에 기존 페이지는 $('input').off()을 통해 특정 입력에 연결된 모든 이벤트를 제거한 다음 새 컨텍스트에 적절하게 새 이벤트 처리기를 다시 연결합니다.

이렇게하면 다시 연결된 선행 쓰기 기능이 실행되지 않는 것처럼 보입니다. (비슷하지만 다른 이슈는 여기에 있습니다 : Trouble updating Bootstrap's typeahead data-source with post response하지만 근원을 잘 업데이트 할 수 있기 때문에 여기서는 관련이 없습니다 - 나는 무엇을 시도해도 타입 - 어 드레서를 얻을 수 없습니다.)

편집 : 설명을 위해 소스를 변경하면 이 아니라이됩니다. 실제 페이지의 소스는 서버에 요청하는 js 함수입니다. 문제는 .off()을 호출하면 이전 버전이 영구적으로 중단 된 것 같습니다. 대부분의 페이지를 다시 작성하지 않고도 .off()에 대한 호출을 제거 할 수 없습니다. 아래의 코드와 jsfiddle은 내가 보여줄 수있는 가장 간단한 코드입니다. 문제

문제를 문서화 여기에 작업 jsfiddle 있습니다 : http://jsfiddle.net/hz5P3/8/

나중에 참조 할 수는 전체 코드는 다음과 같습니다. 간단히 문서화하려면 : input.works text_field에는 한 가지 선행 기입 선언 만 있으며 잘 작동합니다. input.no_works에는 typeahead 함수가 호출되었으며이 입력에서 모든 이벤트를 제거하기 위해 $('.no_works').off()이 호출되었습니다. 이 기능에 대한 재 부착 된 선행 작업은 전혀 작동하지 않습니다.

이 두 번째 전화를 예상대로 작동하도록 설정하는 방법이 있습니까?

감사

HTML을

<div class="container"> 
    <div class="hero-unit"> 
        <h1>Bootstrap jsFiddle Skeleton</h1> 
         
         <p>this is a test typeahead that will work</p>          
        <input type="text" class="works" style="margin: 0 auto;"> 
         
        <p>this is a test typeahead that is updated and will not work</p> 
        <input type="text" class="no_works" style="margin: 0 auto;"> 
    </div> 
</diV>​ 

자바 스크립트

$('.no_works').typeahead({ 
    source: ["cat", "dog", "mouse"] 
}); 
$('.no_works').off(); 

$('.no_works').typeahead({ 
    source: ["cat", "dog", "mouse"] 
}); 

$('.works').typeahead({ 
    source: ["cat", "dog", "mouse"] 
}); 

답변

7

편집 : 좋아, 이제 알 겠어.

그래서, 해당 요소의 jQuery 객체에서 'typeahead'데이터를 삭제해야합니다. 그것은을 할 수있는 100 % 정확한 방법이 될 않을 수도 있지만 그것은 간단하고 작동합니다

http://jsfiddle.net/feXM3/

$('.no_works').typeahead({ 
    source: ["cat", "dog", "mouse"] 
}); 

$('.no_works').off(); 

//amir75 added a line here: 
$('.no_works').data('typeahead', (data = null)) 

$('.no_works').typeahead({ 
    source: ["frog", "cow", "horse"] 
}); 

내 원래의 대답은 :는 나는 생각하지 않는다 ' 끄기 '방법을 사용하면 예상대로 이전 입력 사항 기능이 제거됩니다.

대신이 작업을 수행 할 수 있습니다

//1. store the typeahead object in a variable 
var tah= $('.no_works').typeahead({ 
    source: ["cat", "dog", "mouse"] 
}); 

//2. update the data source 
tah.data('typeahead').source = ["frog", "cow", "horse"]; 

업데이트 jsfiddle을 : 죄송합니다 http://jsfiddle.net/Skp5R/

+0

을 - 나는 질문을했다 명확해야합니다. 소스는 사실 js 요청을하는 함수이므로 변경하는 것은 문제가되지 않습니다. 기존 페이지의 일부로 .off()가 있습니다. 기존 페이지의 큰 덩어리를 다시 작성할 필요없이 .off() 호출을 제거 할 수 없습니다. 여기에 설명 된 소스 변경 방법은 링크 된 질문에서 온 것입니다. 소스 변경은이 문제와 관련이 없으므로이 경우 도움이되지 않습니다. –

+0

내 편집을 참조하십시오. https://github.com/twitter/bootstrap/blob/master/js/bootstrap-typeahead.js – laher

+1

차가운 일에 대한 아이디어를 얻으려면 출처를 살펴볼 가치가 있습니다. 그것이 바로 필요한 작업입니다. 감사! 당신의 솔루션을 읽었을 때, 나는 그것이 왜 부서 지는지 소스에서 볼 수 있습니다.) –