이전 목록 다음
채택완료

ajax로 데이터 불러온 값에 toggle() 함수 작동 안되는 문제입니다.

aamkorjquery
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전 6,556

Copy 
<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body> <div id="list"></div> <script>$(document).ready(function(){    $('[data-toggle="tooltip"]').tooltip();   get_list_data();});function get_list_data(){$.post("링크 주소",{data:data},function(data){  for(var i =0; i < data.length; i++){var item =  '<div class="container"><a href="#" onclick="change(this);" data-toggle="tooltip" title="작동이 안되요 ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ">Hover over me</a></div>'; }$('#list').append(item);});}  </script> </body></html>

 

 

 

ajax로 해당 데이터값을 불러서 append() 함수로 출력했습니다.

 

이 상태에서 왜 toggle이 작동이 안되는거죠?

 

ajax로만 불러와서 append()만 이용하면 그렇습니다.

 

순수 PHP소스단에 불러와서 하면 작동이 되고요.

 

방법이 없을까요???

php jquery
|

답변 2개

채택된 답변
+20 포인트
FFeelz996
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전

소스 보시면 처음에 $(document).ready(function(){} 함수로 

$('[data-toggle="tooltip"]').tooltip(); 이벤트를 적용하라고 명령을 내려 줍니다.  

 

하지만 정작 [data-toggle="tooltip"] 여기에 해당하는 객체들은 현재 페이지에 없는 상태입니다. 

$('[data-toggle="tooltip"]').tooltip(); 실행된후 ajax를 통해서 [data-toggle="tooltip"] 적용될수 있는 

항목들이 append를 통해 페이지에 추가되는거죠. 그래서 실행이 안되는거에요. 

 

$('#list').append(item); 

 

$('[data-toggle="tooltip"]').tooltip();


append 아래에 한줄 추가해 보시기 바랍니다. 

Rido
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전

문서가 다 열리고 난 다음 ajax로 해당 dom을 추가했기 때문에 jquery가 먹지 않는겁니다.

리턴 받아오는 페이지에 js를 같이 심어주시던가

 

get_list_data 함수 하단에서 다시 토글 js를 추가해 주시면 될거 같네요 

답변을 작성하려면 로그인이 필요합니다.