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

我正在为Tiddlywiki制作一种标签界面，我想知道如何在每次打开或关闭tiddler时触发此代码。 Tiddlywiki是在浏览器中运行的HTML笔记本类型，并且提示器是#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()); 
    }); 
};

更新：我不能只是添加自定义事件，除非我可以从当前的代码外做到这一点（如一些在文档加载火灾）。

来源

2012-07-20 Arlen Beiler

如何使用bind（）来创建自定义事件，以执行删除/附加操作并触发它们，以便您可以返回事件响应？ – Panagiotis 2012-07-20 20:28:11

我没有控制打开和关闭的代码，我也不想重写它。这可以从插件完成吗？ – 2012-07-20 20:36:28

我会做出这个答案，见下文。 – Panagiotis 2012-07-20 20:44:07

一种方法是jQuery("#tiddlerDisplay").bind("DOMSubtreeModified", config.macros.singleTiddler.update);，但我认为这只适用于Chrome（可能Opera或Safari，不知道），也似乎不推荐使用。恩斯完成同样的事情，但我认为这些也被弃用。

另一种方式我读this article和探索的TW源代码后发现是这样的：

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

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

来源

2012-07-20 23:07:16

我的大脑正在与所有打开的可能性赛跑！一年前，我正在为此而希望。有时候，当你无法弄清楚什么时候，并且稍后再回来时，它真是太神奇了，它只是一种落伍的地方。 – 2012-07-20 23:27:24

我不知道这是否被称为覆盖或不，但这对我很好。我只需要提防另一个插件重写它。我称这种方法为窃听。 – 2012-07-21 00:06:18

首先创建两个自定义事件，用于添加/清除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()做，但它是一个开始更新更新。检查是否有效

来源

2012-07-20 20:50:17 Panagiotis

只有当所有div被移除或每当div被移除时，第一个触发器才会触发吗？ – 2012-07-20 20:51:42

等一下，我觉得这里有一个误区。小提琴在'＃tiddlerDisplay'中，列表在'＃singleTiddlerList'中。我已更新我的问题以反映这一点。我不想编辑的代码是从'＃tiddlerDisplay'添加和删除div的代码。 – 2012-07-20 20:55:24

嗯可能[这]（http://api.jquery.com/delegate/）将帮助你。也许你需要代表团。 – Panagiotis 2012-07-20 21:00:50

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

回答

相关问题