섭이의 개발일지

최대한 간략하게 설명해보면 다음과 같은 케이스가 있다

//html
<div id="base">
</div>



//javascript
$('#somethingBtn').click(function () {
  $("#base").append("<div class'new'> bla bla </div>");
})


$('.new').click(function() {
  //not working!!!!!
});

1. base id를 갖는 div는 현재 비어있다

2. 어떤 버튼(somethingBtn)을 클릭하면 base 밑으로 .new 라는 class를 가진 엘리먼트가 들어간다

3. '.new'로 이벤트를 달아놨기때문에 이벤트가 먹힐꺼라고 생각한다

4. 안먹힌다

조금 극단적인 예이지만 필자의 경험상 이벤트가 안먹힌다.

해결방법은 간단하다

$('#base').on('click', '.new' ,function() {
  //bla bla ... 
});

해당 엘리먼트에 이벤트를 바로 연결하지말고 append 되는 상위 엘리먼트에 on 으로 이벤트를 걸어준다

on()과 delegate() 등등의 자세한 정보를 알고싶다면

https://hohoya33.tistory.com/44 를 참고해도 좋을 듯 하다

이벤트는 항상 on()으로 거는걸 추천한다

https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method

table작업하시는 분들에게 매우 유용하지 않을까 싶습니다

클릭한 td의 rownum과 colnum을 넘겨주는 소스입니다.

$('td').click(function(){

  var col = $(this).parent().children().index($(this));

  var row = $(this).parent().parent().children().index($(this).parent());

  alert('Row: ' + row + ', Column: ' + col);

});

https://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery

https://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery

https://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery