Fatal编程技术网
  • javascript/
  • Javascript 添加了Greasemonkey和x2B的按钮；jQuery出现，但不'；我一点也不工作

Javascript 添加了Greasemonkey和x2B的按钮；jQuery出现，但不'；我一点也不工作

javascript jquery

Javascript 添加了Greasemonkey和x2B的按钮；jQuery出现，但不'；我一点也不工作,javascript,jquery,click,greasemonkey,Javascript,Jquery,Click,Greasemonkey,使用Greasemonkey（v.1.8）、jQuery（2.0）和Firefox（20.0），我想在页面上为每个音乐片段添加按钮，例如。 我尝试了几种添加按钮的方法。它们会出现，但单击它们没有效果。这段代码省略了一些函数，以使其专注于问题 // ==UserScript== // @name BBC Radio 3 Through the Night // @namespace Zahphod.beeblebrox // @descriptio

使用Greasemonkey（v.1.8）、jQuery（2.0）和Firefox（20.0），我想在页面上为每个音乐片段添加按钮，例如。
我尝试了几种添加按钮的方法。它们会出现，但单击它们没有效果。这段代码省略了一些函数，以使其专注于问题

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

});

})();

/==UserScript==
//@name英国广播公司第三台彻夜直播
//@namespace Zahphod.beeblebrox
//@description英国广播公司第三台彻夜直播
//@包括http://www.bbc.co.uk/programmes/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
//@需要https://gist.github.com/raw/2625891/waitForKeyElements.js
//@grant GM_log
//@version 0.0.01
//==/UserScript==
（功能（）{
艺术家；
//等待“显示更多”
waitForKeyElements（#synosis div.copy a.show-more-truncate），单击showmorelink，true）；
功能单击ShowMoreLink（jNode）{
var clickEvent=document.createEvent（'MouseEvents'）；
clickEvent.initEvent（“单击”，真，真）；
jNode[0]。dispatchEvent（clickEvent）；
}
//如果不是通宵播放列表，请跳过
如果（（！document.title）| |（document.title.indexOf（“穿越黑夜”）<0））返回；
$（“div.full_synosis>div>p:gt（0）”。每个（函数（）{
艺术家=$（this）.get（0）.childNodes[2].textContent.replace（/^\n/，“”）；
//var new_按钮=$（“查询”+艺术家+”）；
var new_button=XPCNativeWrapper.unwrap（$（“查询“+artist+”）；
$（此）.append（新建按钮）；
$（新建按钮）。单击（函数（）{alert（artist）；}）；
});
})();
感谢您的建议。

按钮由XPCNativeWrapper包裹在Greasemonkey下

请尝试XPCNativeWrapper.unwrap，如中所述。按钮由XPCNativeWrapper在Greasemonkey下包裹

试试XPCNativeWrapper.unwrap，就像它在

中所描述的那样，这不是激活您添加的许多按钮的好方法。并且，正在以几种不常见的方式阻止该代码

这方面有几个问题：

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

  • 新建按钮
    已经是jQuery对象。您将使用
    new\u按钮。除了其他问题外，请单击（…
    ）
  • 尝试以这种方式将事件处理程序添加到已创建的节点也容易发生作用域/沙箱错误——在本例中似乎发生了这种情况
  • artist
    将不是你想象的那样。你至少需要一个结尾
  • 覆盖
    alert（）
    ！因此无论发生什么，您都不会看到消息。无论如何，使用
    alert（）
    进行调试是一个糟糕的做法。学会爱上Firebug的控制台并使用
    控制台。
    日志记录函数系列
  • 不要创建大量不同的
    点击
    （或其他）处理程序，每个按钮对应一个！这会阻塞内存，使事情陷入困境，并使调试更加困难
    
jQuery的
    .on（）
    非常适合于此

    • 该代码的其他问题：

  • Greasemonkey/Tampermonkey/Scriptish中不需要构造
  • $（this）.get（0）
    ，在一个
    循环中。each（）
    循环可以归结为
    this
  • 始终为您添加的节点提供自己的类和/或ID是明智的。这有助于操纵和不可避免的样式设置。（使用CSS规则进行样式设置，通过
    GM\u 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);
    }
);

    $（“div.full\u大纲>div>p:gt（0）”）。每个（函数（）{
var artist=this.childNodes[2].textContent.replace（/^\n/，“”）；
$（此）。附加(
“查询”+艺术家+“”
);
} );
$（“部门完整摘要”）。在(
“点击”，
“button.gmArtistQryBtn”，
功能（zEvent）{
var artist=$（zEvent.target）.data（“artist”）| |“OOPSIE！”；
console.log（“艺术家：”，艺术家）；
}
);

    请注意我们是如何传递艺术家数据的。这种方法在浅层HTML克隆（页面可能正在这样做）中幸存下来。

    这不是激活您添加的许多按钮的好方法。而且，它以几种不常见的方式阻碍了代码的运行

    这方面有几个问题：

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

  • new\u按钮
    已经是jQuery对象。您可以使用
    new\u按钮。除了其他问题外，请单击（…
    ）
  • 尝试以这种方式将事件处理程序添加到已创建的节点也容易发生作用域/沙箱错误——在本例中似乎发生了这种情况
  • artist
    将不是你想象的那样。你至少需要一个结尾
  • 覆盖
    alert（）
    ！因此无论发生什么，您都不会看到消息。无论如何，使用
    alert（）
    进行调试是一个糟糕的做法。学会爱上Firebug的控制台并使用
    控制台。
    日志记录函数系列
  • 不要创建大量不同的
    点击
    （或其他）处理程序，每个按钮对应一个！这会阻塞内存，使事情陷入困境，并使调试更加困难
    
jQuery的
    .on（）
    非常适合于此

    • 该代码的其他问题：

  • Greasemonkey/Tampermonkey/Scriptish中不需要构造
  • $（this）.get（0）
    ，在一个
    循环中。each（）
    循环可以归结为
    this
  • 始终为您添加的节点提供自己的类和/或ID是明智的。这有助于操纵和不可避免的样式设置。（使用CSS规则进行样式设置，通过
    GM\u addStyle（）
    ）
  • 该页面显然重写了添加按钮的HTML。这会丢弃添加得不好的事件处理程序。使用
    .on（）
    还有一个原因

    • 普蒂