javascript - 使用 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

这不是激活您添加的大量按钮的好方法。并且，that particular site以几种不常见的方式阻止该代码。

存在以下几个问题:

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

1. new_button 已经是一个 jQuery 对象。除了其他问题之外，您可以使用 new_button.click(...。
2. 尝试以这种方式向创建的节点添加事件处理程序也容易受到范围/沙箱错误的影响 - 正如本例中所发生的那样。
3. 艺术家不会是你想象的那样。您至少需要一个关闭。
4. This particular site覆盖alert()!所以无论如何你都不会看到这条消息。无论如何，使用 alert() 进行调试是一种糟糕的做法。学会喜欢 Firebug 的控制台并使用 console. 系列日志记录功能。

5. 不要创建无数不同的点击(或其他)处理程序，每个按钮一个!这会堵塞内存，使事情陷入困境，并使调试变得更加困难。

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

该代码的其他问题:

1. (function(){ ... ... })(); Greasemonkey/Tampermonkey/Scriptish 中不需要构造。
2. $(this).get(0)，在 .each() 循环内，归结为 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 克隆中幸存下来——页面可能正在这样做。