동적바인딩_jQuery

2022. 1. 27. 10:03ksmart_html_css_js/jQuery

728x90

- 새로 추가된 html 요소에 이벤트가 반응 할 수 있도록 만드는 방법

<script type="text/javascript">
	var $ul01,
			liHtml='';
			liHtml+='<li>';
			liHtml+='<button type="button" class="add">추가</button>';
			liHtml+='<button type="button" class="del">제거</button>';
			liHtml+='</li>';
			$(function(){
				$ul01=$('#ul01')
		});
	</script>

 

제이쿼리 동적 바인딩

인수 -> 1.이벤트명, 2.선택자, 3.함수

 $(document).on('click', '.add', function(){
         console.log('클릭');
         $ul01.append(liHtml);
      });
      $(document).on('click','del',function(){
    	  console.log('제거');
    	  $(this).remove();
      })

728x90