随Greasemonkey + jQuery添加的按钮出现，但单击时不起作用

Question

我想使用Greasemonkey（v.1.8），jQuery（2.0）和Firefox（20.0）在页面上为每首音乐作品添加按钮，例如Through the Night 。
我尝试了几种添加按钮的方法。 它们出现，但是单击它们无效。 这段代码遗漏了一些功能，使其始终专注于该问题。

// ==UserScript==
// @name                BBC Radio 3 Through the Night
// @namespace           Zahphod.beeblebrox
// @description         BBC Radio 3 Through the Night
// @include             http://www.bbc.co.uk/programmes/*
// @require             http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
// @require             https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant               GM_log
// @version             0.0.01
// ==/UserScript==

(function(){

var artist;

// wait to "show more"
waitForKeyElements ("#synopsis div.copy a.show-more-truncate", clickShowMoreLink, true);

function clickShowMoreLink (jNode) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent ("click", true, true);
    jNode[0].dispatchEvent (clickEvent);
}

// skip if not a Through the Night playlist
   if ((!document.title) || (document.title.indexOf("Through the Night") < 0)) return;

$("div.full_synopsis>div>p:gt(0)").each(function() {
    artist = $(this).get(0).childNodes[2].textContent.replace(/^\n/, "");

//  var new_button = $("<button>Query " + artist + "</button>");
    var new_button = XPCNativeWrapper.unwrap($("<button>Query " + artist + "</button>"));

    $(this).append(new_button);
    $(new_button).click(function(){ alert(artist);});       

});

})();

意见表示赞赏。

Answer 1

这不是激活您添加的许多按钮的好方法。 而且， 该特定站点以几种不常见的方式阻止了该代码。

存在以下几个问题：

$(new_button).click(function(){ alert(artist);});

1. new_button已经是一个jQuery对象。 除其他问题外，您将使用new_button.click(...
2. 以这种方式尝试将事件处理程序添加到已创建的节点时，也容易受到范围/沙箱错误的影响-在这种情况下似乎已经发生。
3. artist将不是您想的那样。 您至少需要关闭。
4. 该特定站点将覆盖alert() ！ 因此，无论如何您都不会看到该消息。 无论如何，使用alert()调试是很麻烦的做法。 学习喜欢Firebug的控制台并使用console. 日志功能系列。

5. 不要创建不计其数的不同click （或其他）处理程序，每个按钮一个！ 这会阻塞内存，使事情陷入困境，并使调试更加困难。

   jQuery的.on()对此非常适合。

该代码的其他问题：

1. (function(){ ... ... })(); Greasemonkey / Tampermonkey / Scriptish中不需要构造。
2. $(this).get(0) .each()循环内的$(this).get(0)简化为this 。
3. 总是给您添加的节点自己的类和/或ID是明智的。 这有助于操纵和不可避免的样式。 （通过GM_addStyle()使用CSS规则进行样式设置。）
4. 该页面显然重写了要在其中添加按钮的HTML。 这浪费了添加不良的事件处理程序。 使用.on()另一个原因。

放在一起，将代码的最后一部分更改为：

$("div.full_synopsis>div>p:gt(0)").each ( function () {
    var artist = this.childNodes[2].textContent.replace(/^\n/, "");

    $(this).append (
        '<button class="gmArtistQryBtn" data-artist="' + artist
        + '">Query ' + artist + '</button>'
    );
} );

$("div.full_synopsis").on (
    "click",
    "button.gmArtistQryBtn",
    function (zEvent) {
        var artist = $(zEvent.target).data ("artist") || "OOPSIE!";
        console.log ("artist: ", artist);
    }
);

请注意我们如何传递艺术家数据。 此方法可幸免于浅HTML克隆（页面可能正在做的事情）。

Answer 2

按钮由Greasemonkey下的XPCNativeWrapper包装。

按照https://developer.mozilla.org/en/docs/XPCNativeWrapper中所述尝试XPCNativeWrapper.unwrap