[JQUERY] JSF / PrimeFaces 아약스 업데이트 휴식 jQuery를 이벤트 리스너 함수 바인딩

JSF / PrimeFaces 아약스 업데이트 휴식 jQuery를 이벤트 리스너 함수 바인딩

해결법

1. ---

   1.문제의 원인에 관해서는, 아약스 요청은 아약스 응답에서 새로운 HTML 요소와 HTML DOM 트리를 업데이트합니다. 이러한 새로운 HTML 요소 -obviously- JQuery와 이벤트 핸들러 함수가 연결되어 있지 않습니다. 아약스 요청을 실행 재 그러나 .ready $ (문서) ()하지 않습니다. 당신은 수동으로 다시 실행해야합니다.

   문제의 원인에 관해서는, 아약스 요청은 아약스 응답에서 새로운 HTML 요소와 HTML DOM 트리를 업데이트합니다. 이러한 새로운 HTML 요소 -obviously- JQuery와 이벤트 핸들러 함수가 연결되어 있지 않습니다. 아약스 요청을 실행 재 그러나 .ready $ (문서) ()하지 않습니다. 당신은 수동으로 다시 실행해야합니다.

   이것은 다양한 방법으로 달성 될 수있다. 가장 간단한 방법은 CSTE 연구진은 $ (문서) (이벤트, 선택, 기능) 대신 $의 (선택) CSTE 연구진 (이벤트, 기능)를 사용하는 것입니다. 이 문서에 연결되어 주어진 EVENTNAME이 지정된 셀렉터에 일치하는 요소에 트리거 될 때 주어진 functionRef는 항상 호출됩니다. 명시 적으로 할 필요가 없습니다 그래서 JSF 수단에 의한 기능을 다시 실행합니다.

   $(document).on("change", ":input", function() {
       console.log("From change event on any input: " + this.id);
   });
   

   대체 방법은 명시 적으로 아약스 요청의 완료에 기능을 직접 다시 실행하는 것입니다. 이것은 당신이 실제로 즉시 준비 /로드 이벤트 기간 동안 기능을 실행에 관심있는 유일한 방법이 될 것입니다 (예를 들어 직접적 날짜 선택기와 같은 일부 플러그인 특정 동작 / look'n'feel를 적용). 첫째, 당신은 다음과 같이 재사용 가능한 함수에 .ready () 작업을 $ (문서)를 리팩토링해야합니다

   $(document).ready(function(){
       applyChangeHandler();
   });
   
   function applyChangeHandler() {
       $(":input").on("change", function() {
           console.log("From applyChangeHandler: " + this.id);
       });
   }
   

   (I 제거하고 완전히 불필요한 $의 .each () 접근 방식을 단순화합니다)

   그런 다음, 아약스 요청의 완료에 그것을 재 - 실행에 다음과 같은 방법 중 하나를 선택합니다 :

from https://stackoverflow.com/questions/14400624/jsf-primefaces-ajax-updates-breaks-jquery-event-listener-function-bindings by cc-by-sa and MIT license