문서에서 요소를 추가하거나 제거 할 때 어떤 이벤트가 발생합니까?

Question

Tiddlywiki에 대해 일종의 탭 인터페이스를 만들고 있는데,이 코드를 tiddler가 열리거나 닫힐 때마다 호출하는 방법을 궁금합니다. Tiddlywiki는 브라우저에서 실행되는 HTML 노트 유형이며, Tiddler는 #tiddlerDisplay의 div입니다. 한 번에 하나 이상이있을 수 있으며 대개 하나 이상 있습니다.

목록에 포함하려는 div는 #tiddlerDisplay이고 목록 자체는 jQuery("#mainMenu > #singleTiddlerList")입니다.

config.macros.singleTiddler.update = function(){ 
    jQuery("#mainMenu > #singleTiddlerList").empty(); 
    jQuery("#tiddlerDisplay > div").each(function(i,e){ 
     jQuery("#mainMenu > #singleTiddlerList").append(jQuery(
      createTiddlyButton(document.createElement("li"),jQuery(e).attr("tiddler"),"",config.macros.singleTiddler.clickHandler) 
     ).parent()); 
    }); 
}; 

업데이트 : 현재 코드 외부에서 그것을 할 수 없다면 난 그냥, 사용자 정의 이벤트를 추가 할 수 없습니다 (예 : 문서로드에 발생 일 등).

Answer 1

편도는 jQuery("#tiddlerDisplay").bind("DOMSubtreeModified", config.macros.singleTiddler.update);이지만 Chrome (Opera 또는 Safari 일 가능성이 있음)에서만 작동하며 사용하지 않는 것으로 보입니다 .Firefox에는 이브의 듀오가 있습니다. 동일한 일을 성취하기 위해 nts하지만, 나는 또한 이것들 역시 사용되지 않을 것이라고 생각한다. 이벤트가 발생 후 꼬마의 개폐 것을

(function($, oldRem){ 
    Story.prototype.displayTiddler = function(){ 
     var resp = oldRem.apply(this, arguments); 
     $("#tiddlerDisplay").trigger("displayTiddler"); 
     return(resp); 
    }; 
})(jQuery, Story.prototype.displayTiddler); 
(function($, oldRem){ 
    Story.prototype.closeTiddler = function(){ 
     var resp = oldRem.apply(this, arguments); 
     $("#tiddlerDisplay").trigger("closeTiddler"); 
     return(resp); 
    }; 
})(jQuery, Story.prototype.closeTiddler); 
jQuery("#tiddlerDisplay").bind("displayTiddler", config.macros.singleTiddler.update); 
jQuery("#tiddlerDisplay").bind("closeTiddler", config.macros.singleTiddler.update); 

주의 사항 :

내가 this article을 읽고 티 들리 위키 소스 코드를 탐험 후 발견하는 또 다른 방법이있다. 또한 기사에서 알 수 있듯이 jQuery는 동일한 방식으로 도청 될 수 있지만 기본 DOM 메서드에 대해서는 알지 못합니다. 의심 스럽습니다. 관계없이 모든 사람들이 그것들을 버리고 jQuery를 사용해야합니다!

Answer 2

먼저 div 추가/삭제에 대한 두 개의 맞춤 이벤트를 만듭니다. 위에 게시 된 코드를 사용하는 문서에 바인딩하도록합니다. 코드의 변화 그리고

jQuery(document).bind('div-removed',function(e){ 
    // code stuff to do for removal 
    jQuery("#mainMenu > #singleTiddlerList").empty(); // required 
    // other stuff here 
}); 
jQuery(document).bind('div-appended',function(e){ 
// code stuff to do on append 
     jQuery("#tiddlerDisplay > div").each(function(i,e){ 
      jQuery("#mainMenu > #singleTiddlerList").append(jQuery(
       createTiddlyButton(document.createElement("li"),jQuery(e).attr("tiddler"),"",config.macros.singleTiddler.clickHandler) 
      ).parent()); 
     }); // required 
    //other stuff here 
}); 

약간 실행 :.

config.macros.singleTiddler.update = function(){ 
    $(document).trigger("div-removed"); 
    $(document).trigger("div-appended"); 
}; 

그것은 확실히가 업데이트 유일한 방법 (지금 생각 그것은 또한 .promise()와 함께 할 수 있지만 그것이 시작이다 갱신 아니다