jQuery .live ()와 .on ()의 차이점은 무엇입니까?

85

.on()jQuery 1.7 .live()에는 이전 버전 을 대체 하는 새로운 방법 이 있습니다.

나는 그들 사이의 차이점과이 새로운 방법을 사용하여 얻는 이점을 알고 싶습니다.

jquery  jquery-1.7 
— Ajbeaven
소스

답변:

99

문서 에서 라이브를 사용하고 싶지 않은 이유가 분명합니다 . 또한 Felix에서 언급했듯이 .on이벤트를 첨부하는보다 효율적인 방법입니다.

.live () 메서드의 사용은 더 이상 권장되지 않습니다. 이후 버전의 jQuery는 단점이없는 더 나은 메서드를 제공하기 때문입니다. 특히 .live () 사용시 다음과 같은 문제가 발생합니다.

  • jQuery는 .live()메서드 를 호출하기 전에 selector에서 지정한 요소를 검색하려고 시도하므로 대용량 문서에서는 시간이 많이 걸릴 수 있습니다.
  • 연결 방법은 지원되지 않습니다. 예를 들어, $("a").find(".offsite, .external").live( ... ); 입니다 하지 유효하고 예상대로 작동하지 않습니다.
  • 모든 .live()이벤트가 document요소에 첨부 되므로 이벤트 는 처리되기 전에 가능한 가장 길고 느린 경로를 사용합니다.
  • event.stopPropagation() 이벤트 핸들러를 호출 하는 것은 문서 하단에 첨부 된 이벤트 핸들러를 중지하는 데 효과적이지 않습니다. 이벤트가 이미에 전파되었습니다 document.
  • 이 .live()메서드는 놀랍게도 다른 이벤트 메서드와 상호 작용 $(document).unbind("click")합니다. 예를 들어 .live()! 에 대한 호출로 연결된 모든 클릭 처리기를 제거합니다 .
— 아지즈 펀 자니
소스
8
이것이 새로운 on 메서드를 만드는 대신 라이브 메서드를 개선하지 않는 이유인지 궁금합니다. 라이브로 할 수 있지만 할 수없는 것이 없다면?
— neobie
1
@neobie, 코드가 더 의미 만들기위한 그것의, 그리고 균일 성이
— 옴 샨
@neobie : 이전 버전과의 호환성을 유지하는 것이라고 생각합니다. 이 답변에서 지적한 차이점은 그들의 행동이 어떻게 약간 다른지 보여줍니다. 경우 live()의 동작을 수정했다 on(), 그것은 기존 코드를 중단 할 수있다. jQuery 사람들은 레거시 코드를 "파괴"하는 것을 반드시 두려워하지는 않는다는 것을 보여 주었지만,이 경우에는 회귀를 도입하는 위험을 감수하지 않는 것이 합리적이라고 생각합니다.
— rinogo
그럴 것 같습니다. live()1.7에서 더 이상 사용되지 않고 1.9에서 제거되었습니다. api.jquery.com/live
— rinogo
11

사람들이에서 .live()로 이동할 때 우연히 발견하는 한 가지 차이점은 이벤트를 DOM에 동적으로 추가 된 요소에 바인딩 할 때 .on()매개 변수 .on()가 약간 다르다는 것입니다.

다음은 .live()메서드 와 함께 사용하는 구문의 예입니다 .

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

이제 .live()jQuery 버전 1.7에서 더 이상 사용되지 않고 버전 1.9에서 제거되었으므로이 .on()메서드를 사용해야합니다 . 다음은 .on()메서드 를 사용하는 동등한 예입니다 .

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

.on()버튼 자체가 아닌 문서에 대해 호출 하고 있습니다 . 두 번째 매개 변수에서 이벤트를 수신하는 요소에 대한 선택기를 지정합니다.

위의 예에서는 .on()문서를 호출 했지만 선택기에 더 가까운 요소를 사용하면 더 나은 성능을 얻을 수 있습니다. 을 호출하기 전에 페이지에 존재하는 한 모든 상위 요소가 작동합니다 .on().

이것은 여기 문서에 설명 되어 있지만 놓치기 쉽습니다.

— Ajbeaven
소스
4

참고 항목 공식 블로그

[..] 새로운 .on () 및 .off () API는 jQuery에서 문서에 이벤트를 첨부하는 모든 방법을 통합하며 입력이 더 짧습니다! [...]

— 플로이드
소스
2 
.live()

이 메서드는 현재 및 미래의 현재 선택기와 일치하는 모든 요소에 대한 이벤트 처리기를 연결하는 데 사용됩니다.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

과 

.on()

이 메서드는 하나 이상의 이벤트에 대한 이벤트 처리기 함수를 아래 선택된 요소에 연결하는 데 사용됩니다.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
— 모하메드 아브 라르 아흐메드
소스
1

on vs live의 차이점에 대한 좋은 튜토리얼

위 링크에서 인용

.live ()의 문제점

.live () 메서드의 사용은 더 이상 권장되지 않습니다. 이후 버전의 jQuery는 단점이없는 더 나은 메서드를 제공하기 때문입니다. 특히 .live () 사용시 다음과 같은 문제가 발생합니다.

  1. jQuery는 .live () 메서드를 호출하기 전에 selector에서 지정한 요소를 검색하려고 시도합니다. 이는 대용량 문서에서 시간이 많이 걸릴 수 있습니다.
  2. 연결 방법은 지원되지 않습니다. 예 : $ ( "a"). find ( ". offsite, .external"). live (…); 유효하지 않으며 예상대로 작동하지 않습니다.
  3. 모든 .live () 이벤트는 문서 요소에 첨부되므로 이벤트는 처리되기 전에 가능한 가장 길고 가장 느린 경로를 사용합니다.
  4. 이벤트 핸들러에서 event.stopPropagation ()을 호출하면 문서 하단에 첨부 된 이벤트 핸들러를 중지하는 데 효과적이지 않습니다. 이벤트가 이미 문서로 전파되었습니다.
  5. .live () 메서드는 놀라운 방식으로 다른 이벤트 메서드와 상호 작용합니다. 예를 들어 $ (document) .unbind ( "click")은 .live ()에 대한 모든 호출에 연결된 모든 클릭 처리기를 제거합니다.
— Venkat
소스
0

자세한 정보는 그것을 확인하십시오 .. .live () 및 .on ()

.live () 메서드는 콘텐츠의 동적 생성을 처리 할 때 사용됩니다 .Jquery Slider의 값을 변경할 때 탭을 추가하는 프로그램에서 만든 것처럼 모든 탭에 닫기 버튼 기능을 첨부하고 싶습니다. 생성 될 것입니다 ... 제가 시도한 코드는 ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

그리고 그것은 훨씬 멋지게 작동합니다 ...

— Hiren
소스
SO에 오신 것을 환영합니다. 답변에 대해 자세히 설명하고 링크 만 제공하는 것이 아니라 링크 전용 답변은 여기서 나쁜 습관으로 간주됩니다.
— mata
덕분에 .. 나는 미래의 대답을 내 마음이 계속됩니다 .. :)
— Hiren
0

저는 jQuery를 사용 하는 Chrome 확장 프로그램 "Comment Save" 와 .live(). 확장 기능이 작동하는 방식은를 사용하여 모든 텍스트 영역에 리스너를 연결하는 것입니다. live()-이것은 문서가 변경 될 때마다 모든 새로운 텍스트 영역에 리스너를 연결하기 때문에 잘 작동했습니다.

나는 이사 .on()했지만 잘 작동하지 않습니다. 문서가 변경 될 때마다 리스너를 연결하지 않으므로 .live(). 그것은 내가 추측하는 버그입니다 .on(). 내가 생각하기에 그것에 대해 조심하십시오.

— PixelPerfect3
소스
10
당신은 그것을 잘못 사용하고있을 것입니다-그것은 .live()방법에 약간 다른 구문을 가지고 있습니다 . 에 해당 .on()하는 $('p').live('click', function () { alert('clicked'); });것은 $(document).on('click', 'p', function () { alert('clicked'); });입니다. 의 .on()메서드를 사용한 document다음 두 번째 매개 변수에서 수신 할 이벤트 처리기를 연결할 요소를 지정합니다.
— ajbeaven
1
자세한 내용은 api.jquery.com/on 에서 읽을 수 있습니다 . 제목에서 봐 직접 위임 이벤트
— ajbeaven
1
나도이 문서의 읽기를 가진 좋을 것 : elijahmanor.com/2012/02/...
— ajbeaven
1
selector1이 부모이고 selector2가 selector1의 자식 인 $ (selector1) .on (event, selector2, function)을 수행 할 수도 있습니다. 전체 문서를 검색 할 필요가 없기 때문에 검색 영역이 최소화됩니다.
— Ramsharan 2013
1
@ajbeaven 여기에 첫 번째 의견을 답변으로 바꿔야합니다 (여기에 도착했을 때 찾던 것입니다).
— atwright147
-1

브라우저 종료 이벤트를 식별해야합니다. 연구를 마친 후 jQuery 1.8.3을 사용하여 다음을 수행하고 있습니다.

  1. 하이퍼 링크를 클릭 할 때 다음 jQuery를 사용하여 플래그를 켭니다.

    $ ( 'a'). live ( 'click', function () {cleanSession = false;});

  2. 언제든지 제출의 입력 버튼 유형을 클릭하면 다음 jQuery를 사용하여 플래그를 켭니다.

$ ( "input [type = submit]"). live ( 'click', function () {alert ( 'input button clicked'); cleanSession = false;});

  1. 언제든지 양식 제출이 발생할 때 다음 jQuery를 사용하여 플래그를 켭니다.

$ ( 'form'). live ( 'submit', function () {cleanSession = false;});

이제 중요한 것은 ... 내 솔루션은 .live 대신 .on을 사용하는 경우에만 작동합니다. .on을 사용하면 양식이 제출 된 후 이벤트가 시작되고 너무 늦습니다. 내 양식은 자바 스크립트 호출 (document.form.submit)을 사용하여 제출되는 경우가 많습니다.

따라서 .live와 .on 사이에는 주요 차이점이 있습니다. .live를 사용하면 이벤트가 즉시 시작되지만 .on으로 전환하면 제 시간에 시작되지 않습니다.

— NS
소스
1
이것은 사실이 아닙니다. .on잘못 사용 했거나 코드의 다른 문제로 인해이 문제가 발생했습니다. .on메서드에 대한 코드를 붙여 넣을 수 있습니다 .
— ajbeaven
네. 이것은 사실이 아닙니다. .on ()은 .live ()의 개선 된 버전입니다. 따라서 여기에 코드를 붙여 넣으십시오. 우리는 몇 가지 선명도가되도록
— RecklessSergio
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.