使用Greasemonkey + jQuery添加的按鈕會出現，但在點擊時不起作用

使用Greasemonkey（v.1.8）和jQuery（2.0）和Firefox（20.0）我想爲頁面上的每個音樂作品添加按鈕，例如Through the Night。
我已經嘗試了幾種方法來添加按鈕。它們出現，但點擊它們沒有效果。這段代碼留下了一些功能，以使它專注於這個問題。使用Greasemonkey + jQuery添加的按鈕會出現，但在點擊時不起作用

// ==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);});  

}); 

})();

建議感激。

來源

2013-04-29 Gerald 101

這並不是激活了很多您添加按鈕的一個很好的方式描述嘗試XPCNativeWrapper.unwrap。而且，that particular site正在以一些不常見的方式阻止該代碼。

有幾個問題有：

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

new_button已經是一個jQuery對象。除了其他問題，您可以使用new_button.click(...。
以這種方式嘗試向創建的節點添加事件處理程序也容易受到作用域/沙箱錯誤的影響 - 就像在這種情況下發生的那樣。
artist不會是你想象的那樣。您至少需要關閉。
This particular site覆蓋alert()！所以你不會看到消息。無論如何，使用alert()進行調試是一個糟糕的做法。學會愛Firebug的控制檯並使用console.系列日誌記錄功能。
不要創建不同click一個bazillion（或其他）處理器，每個按鈕！這堵塞了內存，使事情陷入困境，並使調試變得更加困難。

jQuery的.on()是爲這個完美的。並不需要的Greasemonkey/Tampermonkey/Scriptish
1. (function(){ ... ... })();結構：
與該代碼的其他問題。
$(this).get(0)，一個.each()循環中，歸結爲只是this。
總是給節點添加他們自己的類和/或ID是很明智的。這有助於操控和不可避免的造型。（使用CSS規則的造型，經過GM_addStyle()。）

該網頁顯然是重寫在其中添加按鈕的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克隆 - 頁面可能正在做什麼。

來源

2013-04-29 05:51:07

Brock，這非常好。我有很多東西需要學習。感謝您的知識，耐心和明確的解釋。我刪除了閉包，我不得不讓代碼更簡單，但是你的方法甚至比你沒有看到的代碼更好。 – 2013-04-29 11:46:17

按鈕由XPCNativeWrapper Greasemonkey的下纏繞。

，因爲它在https://developer.mozilla.org/en/docs/XPCNativeWrapper

來源

2013-04-29 02:57:27

謝謝。我沒有編寫足夠的Greasemonkey代碼來記住陷阱。我所做的改變現在是原來的問題。仍然失敗了。 – 2013-04-29 03:45:48

使用Greasemonkey + jQuery添加的按鈕會出現，但在點擊時不起作用

回答

相關問題