[jquery] jQuery-요소가 DOM에서 제거 될 때 이벤트 트리거

Program / 글쓴이

요소가 페이지에서 제거 될 때 일부 js 코드를 실행하는 방법을 찾으려고합니다.

jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */

다음과 같은 이벤트가 있습니까?

jQuery('#some-element').onremoval( function() {
    // do post-mortem stuff here
});

감사.

답변

방금 확인한 결과 현재 버전의 JQuery에 이미 내장되어 있습니다.

jQuery-v1.9.1

jQuery UI-v1.10.2

$("#myDiv").on("remove", function () {
    alert("Element was removed");
})

중요 : 이것은 JQuery UI 스크립트 (JQuery 아님)의 기능이므로 두 스크립트 (jquery 및 jquery-ui)를 모두로드해야 작동합니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/72RTz/

답변

이를 위해 jQuery 특수 이벤트 를 사용할 수 있습니다 .

간단하게 말하면

설정:

(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      if (o.handler) {
        o.handler()
      }
    }
  }
})(jQuery)

용법:

$('.thing').bind('destroyed', function() {
  // do stuff
})

Pierre와 DesignerGuy의 의견에 대한 부록 :

를 호출 할 때 콜백이 발생하지 않도록하려면 $('.thing').off('destroyed')if 조건을 다음과 같이 변경하십시오.if (o.handler && o.type !== 'destroyed') { ... }

답변

DOMNodeRemoved 이벤트 (DOM 레벨 3 WC3 스펙의 일부)에 바인딩 할 수 있습니다.

Firefox 및 Chrome의 최신 릴리스 인 IE9에서 작동합니다.

예:

$(document).bind("DOMNodeRemoved", function(e)
{
    alert("Removed: " + e.target.nodeName);
});

바인딩 할 때 요소를 삽입 할 때 알림을받을 수도 있습니다. DOMNodeInserted

답변

요소를 제거하는 기본 제공 이벤트는 없지만 가짜 확장 jQuery의 기본 remove 메소드를 사용하여 작성할 수 있습니다. 참조를 유지하려면 실제로 제거하기 전에 콜백을 호출해야합니다.

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

$('#some-element').bind('remove', function() {
    console.log('removed!');
    // do pre-mortem stuff here
    // 'this' is still a reference to the element, before removing it
});

// some other js code here [...]

$('#some-element').remove();

참고 :이 답변의 일부 문제는 다른 포스터에 의해 설명되었습니다.

  1. 노드를 html() replace()다른 jQuery 메소드 를 통해 제거하면 작동하지 않습니다.
  2. 이 이벤트는 거품
  3. jQuery UI도 remove를 재정의합니다.

이 문제에 대한 가장 우아한 해결책은 다음과 같습니다. https://stackoverflow.com/a/10172676/216941

답변

후킹 .remove()페이지에서 요소를 제거하는 방법에는 여러 가지가 (예를 들어, 사용하여 있기 때문에이 문제를 처리하는 가장 좋은 방법이 아니다 .html(), .replace()등).

내부적으로 다양한 메모리 누수 위험을 방지하기 위해 내부적으로 jQuery는 jQuery.cleanData()제거하는 데 사용 된 메소드에 관계없이 제거 된 각 요소에 대해 함수를 호출하려고 시도 합니다.

자세한 내용은이 답변을 참조하십시오 : javascript memory leaks

따라서 최상의 결과를 얻으 cleanData려면 jquery.event.destroyed 플러그인이 수행 하는 기능과 정확히 일치 하는 함수를 연결해야합니다 .

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js

답변

jQuery UI를 사용하는 사람들 :

jQuery를 UI가 구현하는 jQuery를 방법의 일부를 무시하고있다 remove명시 적으로 지정된 요소를 제거 할뿐만 아니라, 경우 요소가있는 자동 세척의 jQuery 방법으로 DOM에서 (예를 들어, 제거 도착하지 않을 경우에만 처리됩니다 이벤트 replace, html등) . 이것은 기본적으로 jQuery가 DOM 요소와 관련된 이벤트와 데이터를 “정리”할 때 발생하는 동일한 이벤트에 후크를 넣을 수있게합니다.

John Resig는 향후 jQuery 코어 버전에서이 이벤트를 구현하려는 아이디어에 대해 공개하고 있지만 현재 어디에 있는지 잘 모르겠습니다.

답변

jQuery 만 필요 (jQuery UI 필요 없음)

( jQuery UI 프레임 워크에서이 확장을 추출했습니다 )

함께 작동 : empty()및 html()및remove()

$.cleanData = ( function( orig ) {
    return function( elems ) {
        var events, elem, i;
        for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
            try {

                // Only trigger remove when necessary to save time
                events = $._data( elem, "events" );
                if ( events && events.remove ) {
                    $( elem ).triggerHandler( "remove" );
                }

            // Http://bugs.jquery.com/ticket/8235
            } catch ( e ) {}
        }
        orig( elems );
    };
} )( $.cleanData );

이 솔루션을 사용 하면 이벤트 핸들러를 바인드 해제 할 수도 있습니다 .

$("YourElemSelector").off("remove");

시도 해봐! – 예

$.cleanData = (function(orig) {
  return function(elems) {
    var events, elem, i;
    for (i = 0;
      (elem = elems[i]) != null; i++) {
      try {

        // Only trigger remove when necessary to save time
        events = $._data(elem, "events");
        if (events && events.remove) {
          $(elem).triggerHandler("remove");
        }

        // Http://bugs.jquery.com/ticket/8235
      } catch (e) {}
    }
    orig(elems);
  };
})($.cleanData);


$("#DivToBeRemoved").on("remove", function() {
  console.log("div was removed event fired");
});

$("p").on("remove", function() {
  console.log("p was removed event fired");
});

$("span").on("remove", function() {
  console.log("span was removed event fired");
});

// $("span").off("remove");

$("#DivToBeRemoved").on("click", function() {
  console.log("Div was clicked");
});

function RemoveDiv() {
  //       $("#DivToBeRemoved").parent().html("");    
  $("#DivToBeRemoved").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>OnRemove event handler attached to elements `div`, `p` and `span`.</h3>
<div class="container">
  <br>
  <button onclick="RemoveDiv();">Click here to remove div below</button>
  <div id="DivToBeRemoved">
    DIV TO BE REMOVED
    contains 1 p element
    which in turn contains a span element
    <p>i am p (within div)
      <br><br><span>i am span (within div)</span></p>
  </div>
</div>

스 니펫 확장

추가 데모-jsBin