반응형
ajax로 불러온 엘리먼트의 이벤트가 작동되지 않을때 해결 방법
<script>
...
$("#chk_id").click(function (e) { console.log("check!!"); });
...
</script>
...
<div id="student_list">
<input type="checkbox" id="chk_id" />
<div>ggmouse</div>
</div>
위의 코드는 정상적으로 작동이 된다.
그러나! ajax사용 후 불러온 후의 클릭이벤트가 동작하지 않는다. 즉, 아래와 같은 경우를 봐보자
<head>
<script type="text/javascript" src="/js/jquery.tmpl.js"></script>
<script type="text/javascript">
$(function () {
// 작동이 안돼....
$("#chk_id").click(function (e) { console.log("check!!"); });
});
// 리스트에 입힐 json 타입 데이터
var student = [{ Name: "ggmouse" }];
// 데이터 바인딩
var tmpl = $("#studentTemplate").tmpl(student);
$("#student_list").html(tmpl);
</script>
// 리스트에 출력할 템플릿
<script id="studentTemplate" type="text/x-jquery-tmpl">
<input type="checkbox" id="chk_id" />
<div>${Name}</div>
</script>
</head>
<body>
<div id="student_list"></div>
</body>
해결방법
$("#chk_id").click(function (e) { console.log("check!!"); });
코드가 위와같이 작성되어 있다면, 아래와 같이 바꿔보자
$(document).on("click", "#chk_id", function (e) { console.log("check!"); });
완성 코드
<head>
<script type="text/javascript" src="/js/jquery.tmpl.js"></script>
<script type="text/javascript">
$(function () {
// 정상 작동
$(document).on("click", "#chk_id", function (e) { console.log("check!"); });
});
// 리스트에 입힐 json 타입 데이터
var student = [{ Name: "ggmouse" }];
// 데이터 바인딩
var tmpl = $("#studentTemplate").tmpl(student);
$("#student_list").html(tmpl);
</script>
// 리스트에 출력할 템플릿
<script id="studentTemplate" type="text/x-jquery-tmpl">
<input type="checkbox" id="chk_id" />
<div>${Name}</div>
</script>
</head>
<body>
<div id="student_list"></div>
</body>
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] radio 라디오 버튼 이전 선택 (confirm 취소시 선택값 되돌리기) (0) | 2020.06.26 |
|---|---|
| [jQuery] bind(), unbind(), on(), off() 이벤트 등록 및 해제 (0) | 2019.10.21 |
| [jQuery] ajaxStart, ajaxStop 실행 및 특정 ajax에서는 실행되지 않도록 설정 (1) | 2019.10.08 |
| [jQuery] document ready, window load (0) | 2019.10.06 |
| [jQuery] 특정 문자 시작, 포함, 제외하는 class 찾기 (0) | 2019.09.25 |
