jquery .live ( 'click') 대 .click ()

jquery .live ( 'click') 대 .click ()

---

.click(function {...});대신 사용하는 것이 더 나은 상황이 있는지 궁금합니다 .live('click', function {...});.

내가 수집 한 것에서 라이브 옵션이 더 나은 옵션 인 것처럼 보이므로 일반 .click () 대신 거의 모든 상황에서 사용하고 있습니다. 특히 많은 코드가 비동기식으로로드됩니다.

편집 :이 질문의 또 다른 부분. 모든 자바 스크립트를 비동기 적으로로드하는 경우 .click은 여전히 ​​dom에 이미있는 모든 요소를 ​​선택합니다. 권리?

---

이미 존재하는 개체에만 클릭 처리기를 명시 적으로 할당하고 새 개체를 다르게 처리하려는 경우가있을 수 있습니다. 그러나 더 일반적으로 라이브가 항상 작동하는 것은 아닙니다. 다음과 같은 연결 jQuery 문에서는 작동하지 않습니다.

$(this).children().live('click',doSomething);

이벤트가 DOM 트리를 버블 링하는 방식 때문에 제대로 작동하려면 선택기가 필요합니다.

편집 : 누군가가 이것을 찬성했기 때문에 분명히 사람들이 여전히 그것을보고 있습니다. 나는 그것을 지적해야 live하고 bind둘 다 사용되지 않습니다 . .on()IMO는 훨씬 더 명확한 구문 인으로 둘 다 수행 할 수 있습니다 . 교체하려면 bind:

$(selector).on('click', function () {
    ...
});

교체하려면 live:

$(document).on('click', selector, function () {
    ...
});

를 사용하는 대신 $(document)클릭을 모니터링하는 모든 요소가 포함 된 jQuery 객체를 사용할 수 있지만 해당 요소는 호출 할 때 존재해야합니다.

---

( 2017 년 8 월 29 일 참고 : live 많은 버전에서 이전 delegate에 더 이상 사용되지 않고 v1.9에서 제거되었습니다. v3.0에서는 더 이상 사용되지 않습니다. 두 경우 모두 on대신 위임 서명을 사용하십시오 .

---

liveDOM에서 문서 루트까지 버블 링 된 이벤트를 캡처 한 다음 소스 요소를 살펴보면 발생합니다. click요소 자체에서 이벤트를 캡처하여 발생합니다. 따라서을 사용 live중이고 조상 요소 중 하나가 이벤트를 직접 후킹하고 버블 링이 계속되는 것을 방지하는 경우 요소에서 이벤트를 볼 수 없습니다. 일반적으로 이벤트에 가장 가까운 요소 (클릭 등)가 먼저 잡는 반면, 이벤트 live와 비 live이벤트 의 혼합은 미묘한 방식으로이를 변경할 수 있습니다.

예를 들면 :

jQuery(function($) {

  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<!-- Using an old version because `live` was removed in v1.9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

가능한 경우 delegateover를 사용 하는 것이 live좋으므로 범위를 더 철저히 제어 할 수 있습니다. 를 사용 delegate하면 버블 링 이벤트를 캡처하는 루트 요소를 제어 할 수 있습니다 (예 : live기본적으로 delegate문서 루트를 루트로 사용). 또한 가능한 경우 위임되지 않은 비 라이브 이벤트 처리 를 사용 delegate하거나 live상호 작용하지 않는 것이 좋습니다 .

---

몇 년 후 여기에서는 live또는을 사용하지 않을 것입니다 delegate. 의 위임 서명을 사용 on하지만 개념은 여전히 ​​동일합니다. 이벤트는 호출 한 요소에 연결 on되지만 하위 항목이 이벤트 이름 뒤에 지정된 선택자와 일치 할 때만 발생합니다.

jQuery(function($) {

  $(document).on('click', 'span', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

.click과 관련된 모든 개체는 이벤트를 설정할 때 존재해야합니다.

예 : (의사 코드에서) 추가는 $("body").append()예를 들어

append('<div id="foo" class="something">...</div>');
$("div.something").click(function(){...});
append('<div id="bar" class="something">...</div>');

클릭은 foo에서는 작동하지만 막대에서는 작동하지 않습니다.

예 2 :

append('<div id="foo" class="something">...</div>');
$("div.something").live("click",function(){...});
append('<div id="bar" class="something">...</div>');

클릭은 foo와 bar 모두에서 작동합니다.

.live ( 'click'...을 사용하면 이벤트를 만든 후 더 많은 개체를 동적으로 추가 할 수 있으며 클릭 이벤트는 계속 작동합니다.

---

"live"는 코드를 동적으로 생성 할 때 필요합니다. 아래 예를보십시오.

$("#div1").find('button').click(function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div1')
})
$("#div2").find('button').live("click", function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div2')
})

button {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="div1">
  <button>Click</button>
</div>
<div id="div2">
  <button>Live</button>
</div>

"라이브"가 없으면 클릭 이벤트는 첫 번째 버튼을 클릭 할 때만 발생하고 "라이브"를 사용하면 동적으로 생성 된 버튼에 대해서도 클릭 이벤트가 발생합니다.

---

click요소를 동적으로 추가하지 않는 경우 항상 사용 하십시오.

live문서 루트에 이벤트 리스너를 추가하여 작동하고 버블 링 된 이벤트를 수신합니다. 대안은 delegate동일하게 작동하지만 이벤트 핸들러를 지정된 요소에 바인딩하는입니다.
이렇게하면 이벤트가 전체 DOM을 버블 링하지 않고 더 일찍 포착됩니다.

---

.live ()는 초기 페이지로드 후 요소가 추가되는 경우 사용됩니다. 페이지가로드 된 후 AJAX 호출에 의해 추가되는 버튼이 있다고 가정 해 보겠습니다. 이 새 버튼은 .click ()을 사용하여 액세스 할 수 없으므로 .live ( 'click')을 사용해야합니다.

---

내가 이해하는 주요 차이점은 live ()는 작업중인 선택기와 일치하는 새 DOM 요소를 주시하는 반면 click () (또는 bind ( 'click'))은 이벤트 후크를 연결하고 완료된다는 것입니다.

많은 코드가 비동기 적으로로드된다는 점을 감안할 때 live ()를 사용하면 생활이 훨씬 쉬워집니다. 로드하는 코드를 정확히 모르지만 어떤 종류의 요소를 듣게 될지 알고 있다면이 함수를 사용하는 것이 완벽합니다.

성능 향상 측면에서 live () 사용에 대한 한 가지 대안은 AJAX 콜백 함수를 구현하여 이벤트 후크를 다시 바인딩하는 것입니다.

var ajaxCallback = function(){
 $('*').unbind('click');
 $('.something').bind('click', someFunction);
 $('.somethingElse').bind('click', someOtherFunction);
}

이벤트 후크를 적절하게 추적하고이 함수가 적절한 이벤트를 다시 바인딩하는지 확인해야합니다.

ps Ajax 메소드 .get (), .post (), .load () 및 .ajax () 모두 콜백 함수를 지정할 수 있습니다.

---

'live'는 현재 선택기와 일치하는 미래 요소에 대한 이벤트를 처리하므로, 발생하지 않기를 원할 때 클릭을 선택할 수 있습니다. 현재 선택된 요소 만 처리하고 싶습니다.

또한 '라이브'보다 '클릭'을 사용하는 것이 약간의 효율성이 있다고 생각합니다 (증거는 없지만).

남자 이름

---

간단한 코드가 필요한 경우 대부분의 경우 라이브가 더 좋습니다. 최상의 성능을 얻으려면 델리게이트가 항상 라이브보다 낫습니다. bind (click) vs delegate는 그렇게 간단한 질문이 아닙니다 (유사한 항목이 많으면 위임이 더 좋습니다).

---

"live"의 사용은 "jQuery 1.3"이상임을 기억하십시오.

버전 "jQuery 1.4.3"이상에서는 "delegate"가 사용됩니다.

버전 "jQuery 1.7 +"이상이 "on"으로 사용됨

$( 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+

jQuery 1.7부터 .live () 메서드는 더 이상 사용되지 않습니다.

http://api.jquery.com/live/ 확인

감사합니다, Fernando

---

TJ Crowders 답변 외에도 .on(...)스 니펫에 최신 핸들러를 포함하여 더 많은 핸들러를 추가하여 어떤 이벤트가 숨겨지고 있는지 어떤 이벤트가 숨겨져 있는지 확인할 수 있습니다.

내가 발견 한 것은 .live()더 이상 사용되지 않을뿐만 아니라 jQuery 1.9.x 이후로 삭제되었다는 것입니다. 그러나 다른 사람은, 즉
.click, .delegate/ .undelegate과 .on/ .off
아직 없습니다.

또한 Stackoverflow 에서이 주제에 대한 더 많은 논의가 있습니다 .

.live에 의존하는 레거시 코드를 수정해야하지만 새 버전의 jQuery (> 1.8.3)를 사용해야하는 경우 다음 스 니펫으로 수정할 수 있습니다.

// fix if legacy code uses .live, but you want to user newer jQuery library
if (!$.fn.live) {
    // in this case .live does not exist, emulate .live by calling .on
    $.fn.live = function(events, handler) {
      $(this).on(events, null, {}, handler);
    };
}

TJ 스크립트의 확장 인 아래 스 니펫의 의도는 여러 핸들러를 바인드하면 어떤 일이 발생하는지 즉시 직접 시험해 볼 수 있다는 것입니다. 스 니펫을 실행하고 아래 텍스트를 클릭하세요.

jQuery(function($) {

  // .live connects function with all spans
  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  // --- catcher1 events ---

  // .click connects function with id='catcher1'
  $('#catcher1').click(function() {
    display("Click Catcher1 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher2 events ---

  // .click connects function with id='catcher2'
  $('#catcher2').click(function() {
    display("Click Catcher2 caught a click and prevented <tt>live</tt>, <tt>delegate</tt> and <tt>on</tt> from seeing it.");
    return false;
  });

  // .delegate connects function with id='catcher2'
  $(document).delegate('#catcher2', 'click', function() {
    display("Delegate Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // .on connects function with id='catcher2'
  $(document).on('click', '#catcher2', {}, function() {
    display("On Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher3 events ---

  // .delegate connects function with id='catcher3'
  $(document).delegate('#catcher3', 'click', function() {
    display("Delegate Catcher3 caught a click and <tt>live</tt> and <tt>on</tt> can see it.");
    return false;
  });

  // .on connects function with id='catcher3'
  $(document).on('click', '#catcher3', {}, function() {
    display("On Catcher3 caught a click and and <tt>live</tt> and <tt>delegate</tt> can see it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<!-- with JQuery 1.8.3 it still works, but .live was removed since 1.9.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<style>
span.frame {
    line-height: 170%; border-style: groove;
}
</style>

<div>
  <span class="frame">Click me</span>
  <span class="frame">or me</span>
  <span class="frame">or me</span>
  <div>
    <span class="frame">I'm two levels in</span>
    <span class="frame">so am I</span>
  </div>
  <div id='catcher1'>
    <span class="frame">#1 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher2'>
    <span class="frame">#2 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher3'>
    <span class="frame">#3 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
</div>

참고 URL : https://stackoverflow.com/questions/4944293/jquery-liveclick-vs-click