제이쿼리 리피터(repeater) 사용시 이벤트 등 뭔가 추가하고 싶을때 잘안되는 경우 이렇게 한번 해보시면 어떨런지요.

제이쿼리를 이용해서 뭔가 항목을 계속 추가하는 웹페이지를 만들고 싶을때 정말 유용하지요.

아래와 같은 것을 만들때 유용한 것이지요.

 

ADD 버튼을 누를때 계속 항목을 추가하고 싶을때 사용하는 리피터.... 아주 유용한 것이지요.

헌데, 뭔가 중간에 이벤트를 넣고 싶거나 자동계산을 하게 만들거나 할때, 

상당히 어렵네요. 그래서 제이쿼리 repeater의 소스를 구해서 분석도 해보고 여러 실험도 해봤지만, 어려웠습니다.

실패의 실패를 거듭하다가 이런 글을 보게되었지요.

 

일부 양식 필드 반복기에서 jquery 이벤트 키 누르기를 트리거하고 싶습니다(목적은 일부 키를 차단하는 것입니다).

리피터의 입력이 아닌 글로벌 형식의 모든 입력에 대해 작동하는 올바른 스크립트를 추가합니다.

이것을 작동시킬 아이디어가 있습니까?

댓글들을 보니 이러글이 많았습니다.

1. 리피터에 의해 동적으로 추가된 필드는 자바스크립트에서 볼 수 없는 것 같습니다.

2. 동일한 형식의 다른 입력 필드와 함께 작동하는 동안 리피터에 의해 동적으로 추가된 입력 필드가 자바 스크립트에 의해 표시되지 않는 것 같습니다.

페이지가 로드될 때 이벤트 바인딩이 완료되고 이후에 새 요소를 생성하여 이벤트가 해당 요소에 바인딩되지 않기 때문에 올바른 동작입니다.

이벤트 위임이라는 기술을 사용해야 합니다. 


코드는 아주 간단했습니다.
알고나니 어려운 것은 아니었지요.

$(document).on('keypress', 'input', function(e){
      // the code 
  });
  
  //  $(document)를 div, 양식 등과 같은 가장 가까운 정적 부모로 변경할 수 있습니다.
  
  
 // form의 변화를 감지해서 처리하는 방법
 $('form').on('keypress', 'input', function(){
   // code here
});


$(staticParent).on(event, selector, callback); 
// staticParent는 페이지가 로드될 때 부모 요소인 요소입니다. 동적으로 생성된 부모가 아니어야 합니다.

 

위의 글을 읽어보니, 왜 그게 안되었는지 알았습니다.

순서의 문제였군요. repeater가 생성된 후 이벤트를 만들어도 동작하지 않는 문제는

문서에 주던지 폼에 줘서 실행해야 한다는 것을...

전체적으로 요소를 꾸며서 작동하게 만드는 과제는 남았지만,

그래도 한줄기 해결책은 된 것 같아서 공유해 봅니다.

 

오늘도 코딩으로 더 나은 세상을 꿈꾸며....