2014-11-26

append()나 html()로 새로운 객체인 aa라는 아이디를 가지는 버튼(<input type='button' id='aa'>)을 생성했다고 하자. 그후에

$('#aa').click( function(){ 
  alert('hi!');
}); 

라는 구문을 집어 넣어도 아무런 이벤트가 발생하지 않는 것을 볼 수있다.

동적으로 생성된 객체는 client 화면이 생성될때 생성된 객체가 아니기 때문이다. 그럴때는 바인딩을 사용 하면 된다.

기존에는 .live()함수가 사용 됐지만, 버전이 업되면서 .on()으로 사용 되고 있다.

$(document).on('click', 'aa', function(){ 
  alert('hi!'); 
}); 

위와 같이 .on( '이벤트', '객체', '동작'); 으로 사용 하면 된다.

//----------------- 추가 2014.11.28
attr('selected') 와 같은 구문 역시 동적으로 만들어진 객체에 대해서는 제대로 된 값을 반환하지 못한다.

<select id='sa'></select>

<script>
$(function(){
  $('#sa').append("<option value='1'>a</option>"); 
});
</script>

만약 위와 같은 객체에 동적으로 option을 하나 추가 하였다면,

해당 option의 selected 여부는

$('#sa option').is(':selected'); //반환값은 true또는flase 

식으로 체크 하여야 한다.

//----------------- 추가 2015.11.10
동적으로 추가된 option중 선택된 것들의 개수를 알아보려고 할때

$('#sa').children('option:selected').size();