在文档中添加或删除元素时会触发什么事件？

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

首先为追加/清除 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() 完成，但这是一个开始。更新更新以检查这是否有效。

Answer 2

一种方法是jQuery("#tiddlerDisplay").bind("DOMSubtreeModified", config.macros.singleTiddler.update);，但我认为这仅适用于 Chrome（可能是 Opera 或 Safari，不确定），而且似乎已被弃用。 Firefox 有两个事件来完成同样的事情，但我认为这些也已被弃用。

我在阅读this article 并探索 TiddlyWiki 源代码后发现的另一种方法是：

(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);

请注意，事件会在 tiddler 打开或关闭之后触发。此外，正如文章所述，jQuery 可以以同样的方式被窃听，但我不知道原生 DOM 方法，我对此表示怀疑。应该有一个事件，但无论如何，每个人都应该完全放弃它们并使用 jQuery！