레일즈 PJAX와 트위터 부트 스트랩 플러그인이 훌륭하게 재생되지 않습니다.

Question

안녕하세요, 저는 트위터 부트 스트랩 Jquery Plugins을 사용하여 Rails PJAX를 사용하고 있습니다. 나는 그들 모두가 함께 일하는 것처럼 보이지 않는다. 예를 들어, 페이지 매기기를 사용하고 일부 요소에 마우 스 영향을줍니다.

처음 페이지를 새로 고침하고 작동하는 모든 페이지 위로 마우스를 가져 가면. 페이지 매김에서 다음 페이지를 클릭하면 날짜가 올라간 후 마우스를 올리면 작동하지 않습니다. 논리적으로 DOM은 이미 한 번로드 되었기 때문에 나는 생각할 것이다. 내가 무엇을 할 수 있을지?

또한 Rails 3.2 애플리케이션에서 Rails Pjax를 사용하면 Pjax 용 애플리케이션에 Jquery를 작성할 필요가 없다는 점에 유의하십시오.

https://github.com/nz/pjax-rails http://twitter.github.com/bootstrap/javascript.html#popovers

는 해결 : 사용 : 실제로

$(document).on('ready ajaxComplete', function() { 
    $('a').popover() 
}); 

Answer 1

짧은 버전 문제를 해결

pjax : end 이벤트를 사용하여 새로운 요소에 부트 스트랩 비헤이비어를 적용합니다.

pjax가 새 컨텐츠를로드 할 때 부트 스트랩 핸들러가 모든 요소에 바인드되지 않았습니다. 일반적인 jQuery 요소를 사용하면 '라이브'를 사용하여 jQuery에서 새 내용을 감지하고 올바른 핸들러를 적용 할 수 있습니다. 이 첫 번째 부분이 이미 알고 있다면 죄송합니다. 예를 들어

이 당신의 jQuery를 준비 기능에있는 경우 :

$('a').click(function() { alert('here') } 

동적으로 다른 앵커 요소를 포함하는 내용을로드하는 경우, 클릭 핸들러는 바인딩되지 않습니다.

그러나 당신이 할 경우 : 새로운 내용이로드 될 때이 라이브 사용해 바인드 있기 때문에

$('a').live('click', function() { alert('here') } 

, JQuery와 클릭 처리기를 추가합니다.

부트 스트랩으로 돌아 가기. 팝 오버 (popover)와 같은 것에 대해서는 내가 알 수있는 한 '라이브'방법이 없다. 이 변경할 수 없습니다 :

$('a').popover() 

이에 : 앵커가 pjax (또는 아약스 또는 아무것도 동적)를 통해로드 된 경우

$('a').live('popover') # WON'T WORK 

는 그래서, 새로운 앵커는 popovers으로 바인딩되지 않습니다.

pjax : end 이벤트를 바인드하여 pjax 컨텐츠를 삽입 한 후에 작업을 수행 할 수있는 방법이 있습니다. 팝 오버의 예에서 : pjax 내용은 해당 기능을 실행하고 새로 삽입 된 것을 포함하여 모든 앵커 요소에 팝 오버 기능을 적용로드 될 때마다

$(document) 
    .on('pjax:end', function() { $('a').popover() }) 

. 선택자를 통해 새로운 컨텐트가있는 컨테이너에만 추가로 분리 할 수 ​​있으므로 변경되지 않은 항목에 기능을 다시 적용하지 않아도됩니다.