[jquery] 동적 html 생성 후 Event 바인딩.

WEB DEVELOPER/JQUERY|2018. 12. 19. 13:05

보통 on 함수로 사용하시면되겠습니다.

bind, unbind, delegate 등등 모든 함수들이 on으로 통합 되었으니까요.

그냥 바로 설명들어갑니다. 소스코드보시죠.


테스트 코드입니다. 





* 통합소스 입니다 *

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  /*
  $("#testUl").on("click","li",function(){
     alert($(this).text());
  });
  */
  // 아래있는 on이벤트를 막고 위에있는 
  // on이벤트를 풀고 실행하게 되면.
  // testUl 의 자식요소중 li 에 모두 묶어 
  // click 이벤트를 바인딩시켜줍니다(★동적생성도)
  // 여기서 this는 testUl 자식요소인 li 이지만 
  // 동적으로 생성된 모든 li들을 포함합니다.
  // 밑에 있는 on함수 와 비교하여 내용을 이해하세요.. 
  // 나중에 많이 쓰이기도 하고 중요한개념입니다. 구글검색어 (jquery delegate 개념)
 
  $("#testUl>li").on("click",function(){
     alert($(this).text());
  });
  // 이대로 실행하게 되면
  // id가 testUl 녀석의 li 태그에 클릭이벤트를 겁니다. 
  // *중요* 여기서  this는 testUl 의 자식요소인 li입니다. (★원래 만들어져있던.) 
  // 버튼을 클릭해서 append 해서 li를 추가하게되면. 
  // 동적으로 생성된 li 태그에는 아래 함수로 추가한 alert 창이 나오지않습니다.  
  
  $("#addbtn").on("click",function(){
     $("#testUl").append("<li>(Append)Click</li>")
  });
});
</script>
</head>
<body>
 
<div>
   <ul id="testUl">
       <li>Click</li>
        <li>Click</li>
        <li>Click</li>
        <li>Click</li>
    </ul>
</div>
<button id="addbtn"> 추가 </button>
 
</body>
</html>
cs


저작자표시

'WEB DEVELOPER > JQUERY' 카테고리의 다른 글

나만의 jquey 함수를 만들어보자.  (0) 2019.01.10
[JSON] object에 접근하기  (0) 2019.01.07
[jquery] 이벤트 등록 방법 여러가지.  (0) 2019.01.02
[HTML] image 버튼을 만들어보자.  (0) 2018.12.21
네이버 API 지도 사용하기. (2018년 12월)  (0) 2018.12.19

댓글()

티스토리툴바