//on: 1.8이전에는 live 사용
//처음부터 존재하는 요소나 미래에 생기게 될 요소에 모두 이벤트 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
//jquery on("click")과 click() 차이
//동적으로 이벤트를 바인딩할 수 있는지의 차이
//click()은 최초에 선언된 element에만 동작 가능
//두번째 파라메타에선 지정자를 선택 가능..on("click",지정자,,function())
/* //정적이벤트
$("#mylang").children().click(function() {
$(this).remove();
});
//li태그 추가
//정적인 이벤트는 추가된후 삭제 안됨(최초에 선언한 엘리멘트만 동작가능)
$("#mylang").append('<li>JavaScript</li>'); */
//동적이벤트
//이벤트가 이어나갈 것에 대해 click 옆에 두기..'li'
$("#mylang").on("click", 'li', function() {
$(this).remove(); //$(event.target).remove())
});
$("#mylang").append('<li>JavaScript</li>');
});
</script>
</head>
<body>
<ul id="mylang">
<li>Java</li>
<li>Oracle</li>
<li>Jquery</li>
</ul>
</body>
</html>
'JQuery' 카테고리의 다른 글
| 211006_on,button(영화관,영화) (0) | 2021.10.06 |
|---|---|
| 211006_ (0) | 2021.10.06 |
| 21006_animate,button,each (0) | 2021.10.06 |
| 211006_image,each,figure (0) | 2021.10.06 |
| 211006_array,each (0) | 2021.10.06 |