jQuery에서 live ()를 on ()으로 바꾸기


202

내 응용 프로그램이 동적으로 드롭 다운을 추가했습니다. 사용자는 필요한만큼 추가 할 수 있습니다.

나는 전통적으로 jQuery의 live()방법을 사용하여 이러한 드롭 다운 중 하나가 언제 발견되었는지 감지했습니다 change().

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

jQuery 1.7부터는 다음과 같이 업데이트했습니다.

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

문서를 보면 완벽하게 유효해야합니다 (맞습니까?). 그러나 이벤트 핸들러는 절대 실행되지 않습니다. 물론 jQuery 1.7이로드되어 실행되고 있음을 확인했습니다. 오류 로그에 오류가 없습니다.

내가 뭘 잘못하고 있죠? 감사!


2
나는 이것이 늦었지만 jQuery live가 실제로 on어쨌든 사용 하고있는 것처럼 보이 므로 live제거 될 때까지 레거시 코드를 다시 작성해야 할 수도 있습니다 .1.9라고 생각합니다. 1.7.1 소스에서 발췌 : live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn ); return this;}따라서 버전 live이 없어진 버전으로 업그레이드 하지 않으면 레거시 코드에 대한 업데이트가 즉시 필요하지 않을 수 있습니다. 들어 새로운 과정 개시 코드 on()대신으로 권장합니다. 나는이 정보가 어떤 단계에서 다른 사람에게 도움이 될 것이라고 생각했습니다.
Nope

1
참조 마이그레이션 예 변경하는 방법 live에를 on.
Samuel Liew

답변:


246

on문서 (굵게) 상태) :

이벤트 핸들러는 현재 선택된 요소에만 바인딩됩니다. 코드가 호출 할 때 페이지에 존재해야합니다 .on().

동등한에이 .live()같은 것

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

이벤트 핸들러를 가능한 한 요소, 즉 계층 구조에서 더 가까운 요소에 가깝게 바인딩하는 것이 좋습니다.

업데이트 : 다른 질문에 대답하는 동안 .live문서 에도 언급되어 있음을 알았습니다 .

.live()후속 방법 으로이 방법을 다시 작성하는 것은 간단합니다. 다음은 세 가지 이벤트 첨부 메소드 모두에 대한 동등한 호출을위한 템플리트입니다.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

5
@ 잭 : 걱정하지 마세요. IMO 좋은 질문입니다. 나는 그들이 모두를 변환 할 때 다른 사람이이를 보려고합니다 가정 bind, livedelegate호출 on.
Felix Kling

4
아 그래, 물론 우리는 담요 찾기를 실행 한 후이 답변을보고에서 대체 .live>.on
ajbeaven

3
IMO는 .on청취자가 실제로 당신이 제공하는 선택기에 부착되어 있기 때문에 구문은 더 논리적이다. 이벤트가 트리거되면 jQuery는 DOM을 순회하고 지정된 경우 핸들러를 실행합니다 (단순 이벤트 위임). .live"매직 한"무언가가 발생했다고 제안했으며, 완전히 미래가 아닌 "미래 요소"에 대한 이벤트 핸들러를 첨부한다고합니다.
David Hellsing

1
@FelixKling 맞습니다-나는 이것도 우연히 발견했습니다! 감사합니다
willdanceforfun

2
검색 엔진의 경우 : jQuery ".live ()"메소드는 v1.7부터 감가 상각되며 v1.9에서 제거되었습니다. 대신 ".on ()"메소드를 사용하여 스크립트를 수정하십시오. 놀랍게도 이것은 현재 Microsoft jquery.unobtrusive-ajax.js v2.0.20710.0에도 영향을 미칩니다 (Microsoft는 스크립트를 업데이트하지 않았으므로 이제는 중단되었습니다).
Tony Wall

25

선택한 답변 외에도

jQuery.live애플리케이션이 마이그레이션되기를 기다리는 동안 jQuery 1.9 이상으로 포트 하십시오. 이것을 JavaScript 파일에 추가하십시오.

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

참고 : 위 기능 this.selector은 제거 된 jQuery v3에서 작동하지 않습니다 .

또는 https://github.com/jquery/jquery-migrate 를 사용할 수 있습니다


7

타사 코드 편집과 관련이없는 더 나은 솔루션을 찾았습니다.

https://github.com/jquery/jquery-migrate/#readme

Visual Studio에서 jQuery Migrate NuGet 패키지를 설치하여 모든 버전 관리 문제를 해결하십시오. 다음에 Microsoft는 눈에 거슬리지 않는 AJAX 및 유효성 검사 모듈을 업데이트하여 마이그레이션 스크립트없이 다시 시도하여 문제가 해결되었는지 확인합니다.

jQuery Foundation이 jQuery Migrate를 유지 관리하기 때문에 이것이 타사 라이브러리에 대한 최선의 접근 방법 일뿐 만 아니라 라이브러리 업데이트 방법을 자세히 설명하는 자체 라이브러리에 대한 경고 메시지를 얻는다고 생각합니다.


3

선택된 답변 외에도

당신이 사용하는 경우 비주얼 스튜디오를 , 당신은 사용할 수있는 정규식 교체 .
편집> 찾기 및 바꾸기> 파일에서 바꾸기
또는 Ctrl + Shift + H

찾기 및 바꾸기 팝업에서 다음 필드를 설정하십시오.

찾을 내용 : \$\((.*)\)\.live\((.*),
바꾸기 : $(document.body).on($2,$1,
찾기 옵션에서 "정규 표현식 사용"을 확인하십시오.


-1

jquery verision xxxjs 열린 편집기, 찾기 jQuery.fn.extend

코드 추가

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

예 : jquery-2.1.1.js-> 줄 7469 (jQuery.fn.extend)

이미지보기 예

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.