동적으로 생성된 컨텐츠에 대해 Twitter 부트스트랩 팝업이 작동하지 않음

동적으로 생성된 컨텐츠에 대해 Twitter 부트스트랩 팝업이 작동하지 않음

스택 오버플로우에 게시하는 것은 처음이라, 내가 여기서 망친 것이 있다면 미리 사과드립니다.

트위터 부트스트랩의 팝업을 사용하고 있습니다.내 팝업은 HTML 문서에 수동으로 입력하는 요소에 대해 작동하는 것 같지만 자바스크립트/Ajax를 통해 동적으로 생성하는 요소에는 작동하지 않습니다.

예를 들어 수동으로 HTML 문서에 직접 추가하면 팝업이 작동하는 것 같습니다.

<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>

하지만 제가 정말로 필요로 하는 것은 동적으로 생성된 요소에 팝오버를 적용하는 것입니다.저는 XMLHtpRequest를 사용하여 PHP 파일로 요청을 보낸 다음 응답 텍스트를 잡고 표시합니다.앞서 언급한 PHP 파일에 이 코드 줄을 추가하면 다음과 같습니다.

 echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";

... 물론 "팝오버를 위한 시도"라는 단어가 나타나지만, 팝오버 자체는 작동하지 않습니다!

이것은 한동안 저를 미치게 했고 누군가 저를 도와준다면 정말 믿을 수 없을 것 같습니다!부트스트랩의 팝오버를 활성화하기 위해 사용 중인 JQuery 기능도 추가했습니다. 그 가치가 있습니다.

$(function (){
$("[rel=popover]").popover({placement:'left'});
}); 

저는 유사한 문제들을 철저히 조사해보았고 제가 찾을 수 있는 최선의 방법은 이 링크였습니다.하지만 그 링크 역시 해결책이 없는 것 같습니다.다시 한번 감사드립니다!

업데이트:

고쳤습니다! 도와주신 모든 분들께 감사드립니다.제 문제는 요소를 문서 객체 모델에 추가하기 전에 함수를 호출하는 것이었습니다.여러가지 수정 가능성이 있습니다 - 단순히 포퍼 기능을 아약스 기능의 END로 전환하여 솔루션을 테스트해보았는데 효과가 있었습니다!

전화를 해야합니다.$("[rel=popover]").popover({placement:'left'});요소가 DOM에 있는 후.

갱신하다

jQuery를 사용하는 경우

$(element_selector)
  // load results into HTML of element_selector
  .load('your/php/file')
  // when done, initialize popovers
  .done(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

또는 jQuery ajax 요청에 대한 catch all.

$.ajaxComplete(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

ajax의 success function에서는 popover.이런 거.

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}

이 기능은 내가 입력한 것처럼 "rel=popover"를 검색해야 하는 페이지의 위치를 지정해야 하는 셀렉터에서 적절하게 작동합니다. *

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});

언급URL : https://stackoverflow.com/questions/11947094/twitter-bootstrap-popovers-not-working-for-dynamically-generated-content