ajax로 데이터 불러온 값에 toggle() 함수 작동 안되는 문제입니다.
본문
<!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소스단에 불러와서 하면 작동이 되고요.
방법이 없을까요???
답변 2
소스 보시면 처음에 $(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 아래에 한줄 추가해 보시기 바랍니다.
문서가 다 열리고 난 다음 ajax로 해당 dom을 추가했기 때문에 jquery가 먹지 않는겁니다.
리턴 받아오는 페이지에 js를 같이 심어주시던가
get_list_data 함수 하단에서 다시 토글 js를 추가해 주시면 될거 같네요
답변을 작성하시기 전에 로그인 해주세요.
