隨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