ajax로 데이터 불러온 값에 toggle() 함수 작동 안되는 문제입니다. 채택완료
amkorjquery
9년 전
조회 6,342
</p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <title>Bootstrap Example</title></p><p> <meta charset="utf-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1"></p><p> <link rel="stylesheet" href="<a href="<a href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="noopener noreferrer">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>"><a href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="noopener noreferrer">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a></a>"></p><p> <script src="<a href="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a>"><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a></a>"></script></p><p> <script src="<a href="<a href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" target="_blank" rel="noopener noreferrer">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>"><a href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" target="_blank" rel="noopener noreferrer">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a></a>"></script></p><p></head></p><p><body></p><p> </p><p><div id="list"></div></p><p> </p><p><script></p><p>$(document).ready(function(){</p><p> $('[data-toggle="tooltip"]').tooltip();</p><p> get_list_data();</p><p>});</p><p>function <span style="font-size: 14.6667px; line-height: 1.5;">get_list_data(){</span></p><p>$.post(</p><p style="margin-left: 40px;">"링크 주소",</p><p style="margin-left: 40px;">{data:data},</p><p style="margin-left: 40px;">function(data){</p><p style="margin-left: 40px;"> </p><p style="margin-left: 40px;"> for(var i =0; i < data.length; i++){</p><p style="margin-left: 80px;"><span style="font-size: 14.6667px; line-height: 1.5;">var item =</span><span style="font-size: 14.6667px; line-height: 1.5;"> </span> '<span style="font-size: 14.6667px;"><div class="container"></span><span style="font-size: 11pt; line-height: 1.5;"><a href="#" </span><strong style="margin: 0px; padding: 0px; font-size: 13px; border: 0px; vertical-align: baseline; color: rgb(31, 31, 31); font-family: "맑은 고딕", "malgun gothic", 돋움, dotum, AppleGothic, sans-serif; line-height: 23px; background-color: rgb(255, 255, 255);"><span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(255, 0, 0);">onclick="change(this);" </span></strong><span style="font-size: 11pt; line-height: 1.5;">data-toggle="tooltip" title="작동이 안되요 ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ">Hover over me</a></span><span style="font-size: 11pt; line-height: 1.5;"></div></span><span style="font-size: 11pt; line-height: 1.5;">';</span></p><p style="margin-left: 40px;"> }</p><p style="margin-left: 40px;">$('#list').append(item);</p><p style="margin-left: 40px;">}</p><p>);</p><p>}</p><p> </p><p> </p><p></script></p><p> </p><p></body></p><p></html></p><p> </p><p> </p><p> </p><p>
ajax로 해당 데이터값을 불러서 append() 함수로 출력했습니다.
이 상태에서 왜 toggle이 작동이 안되는거죠?
ajax로만 불러와서 append()만 이용하면 그렇습니다.
순수 PHP소스단에 불러와서 하면 작동이 되고요.
방법이 없을까요???
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
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 아래에 한줄 추가해 보시기 바랍니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인