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

Program / 글쓴이

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

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

답변

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

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

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

답변

사람들이에서 .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().

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

답변

참고 항목 공식 블로그

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

답변

.live()

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

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

과 

.on()

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

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

답변

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 ()에 대한 모든 호출에 연결된 모든 클릭 처리기를 제거합니다.

답변

자세한 정보는 그것을 확인하십시오 .. .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" );
        });

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

답변

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

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