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

这不是激活你添加的很多按钮的好方法。并且，that particular site以一些不常见的方式阻止了这些代码。

有几个问题：

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

new_button已经是一个jQuery对象。除了其他问题之外，您将使用new_button.click(...。
尝试以这种方式向创建的节点添加事件处理程序也容易受到范围/沙箱错误的影响 - 在这种情况下似乎已经发生过。
artist不会是您的想法。你至少需要一个关闭。
This particular site覆盖alert()！所以你无论如何都不会看到这个信息。无论如何，使用alert()进行调试是一种糟糕的做法。学会爱 Firebug 的控制台并使用console.系列日志记录功能。
不要创建数以千计的不同click（或其他）处理程序，每个按钮一个！这会堵塞内存，使事情陷入困境，并使调试变得更加困难。

jQuery的.on()非常适合这种情况。

该代码的其他问题：

(function(){ ... ... })();构造。
$(this).get(0)，在.each()循环内，归结为this。
总是给你添加的节点，他们自己的类和/或ID是明智的。这有助于操纵和不可避免的造型。（通过GM_addStyle()使用CSS规则进行样式设置。）
该页面显然重写了添加按钮的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

使用Greasemonkey + jQuery添加的按钮会出现，但在点击时不起作用

2 个答案: