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！

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

2 个答案: