0

I am attempting to write my first userscript using Greasemonkey, in Firefox. I have done a good bit of research because I am new to userscripts and jQuery but I can't seem to get this simple test script to work. So far I have this in the Test.user.js file:

// ==UserScript 
// @name            Desk Notifications 
// @description     Displays special notifications to NVOWS coaches at desk.com
// @downloadURL     http://www.example.com/deskNotifications.user.js
// @include         http://nvows.desk.com/agent
// @namespace       http://www.example.com/userscripts
// @updateURL       http://www.example.com/deskNotifications.meta.js
// @version         0.1
// @grant           none
// ==/UserScript 

$(document).ready(function(){ 
    alert('Script loaded.'); 
    $('.interaction_type_60').click(function() { 
        alert("You clicked a case!"); 
    }); 
    $('.interaction_type_40').click(function() { 
        alert("You clicked a case!"); 
    }); 
});


What I need it to do is obviously a lot more complicated but because I am new to jQuery and userscripts I just wanted to make this work first. So far the "Script Loaded." is being displayed so that rules out a lot of possible problems. When I run only this part of the code in firebug it works fine:

$(document).ready(function(){ 
    alert('Script loaded.'); 
    $('.interaction_type_60').click(function() { 
        alert("You clicked a case!"); 
    }); 
    $('.interaction_type_40').click(function() { 
        alert("You clicked a case!"); 
    }); 
});

So that rules out having code errors or grabbing a wrong class selector. I can't see what could be the issue if the code is right and it is being executed. If anyone could help that would be greatly appreciated. I am not a newbie to programming. Just web based stuff.

Here is the part of the HTML page that I am trying to see when it is clicked.

<tbody id="ticket_filter_list_items" class=" ">
<tr id="ticket_filter_item_73354627" class="ticket_filter_item ticket_filter_item_table_view interaction_type_60 ticket_filter_item_open ticket_filter_item_current_selected" onclick=" ticketEditTableView(73354627, event);return false; " data-in-search="" data-ticket-id="73354627" style="">
<tr id="ticket_filter_item_73382205" class="ticket_filter_item ticket_filter_item_table_view interaction_type_40 ticket_filter_item_open " onclick=" ticketEditTableView(73382205, event);return false; " data-in-search="" data-ticket-id="73382205" style="">
</tbody>



This is off topic and not a big deal but if you see something that would make this userscript execute on pages that aren't 'http://nvows.desk.com/agent' then let me know. It says "Script loaded." every time I go to Stack Overflow. Ha.

--------------------------------------

UPDATE: I just tried to do this for testing: 

$(document)
.on('click', this, function(){
    alert('Please Work!!!!');
})

The things that I have been trying to click this whole time are the things that are not displaying the message. All of them are loaded with javascript after the page is loaded. I am almost positive that is the reason they will not allow me to click them. Is there a way to click these items. In the HTML script they look the same as the other elements.

4

2 回答 2

3

你说你已经在萤火虫控制台上运行了代码并且它工作正常，这里留下的选择很少。我相信您尝试添加这些事件的 HTML 标签尚未创建。如果这些元素是通过 JavaScript 创建的并且创建它们的代码尚未运行，则会发生这种情况。另一种可能性是元素在 DOM 上但尚未收到这些类，如果这些类是使用 JavaScript 给出的，也可能发生。

试试这个代码示例，看看它是否有帮助（让我知道结果）：

$(document).ready(function(){ 
    alert('Script loaded.'); 
    $(document)
        .on('click', '.interaction_type_60', function() { 
            alert("You clicked a case!"); 
        })
        .on('click', '.interaction_type_40', function() { 
            alert("You clicked a case!"); 
        }); 
});

注意：当您的原始代码运行时，您尝试将这些事件附加到的元素必须存在于 DOM 上，并且它们必须具有您定义的类。我的代码所做的是将事件附加到文档元素并查找冒泡元素链的单击事件，允许您添加包含这些选择器的新元素，并且将调用侦听器，而无需专门将事件处理程序附加到那些元素。

附言

在这种特定情况下，您甚至不需要该$(document).ready(..)部件。您可以使用：

$(document)
    .on('click', '.interaction_type_60', function() { 
        alert("You clicked a case!"); 
    })
    .on('click', '.interaction_type_40', function() { 
        alert("You clicked a case!"); 
    });

因为事件附加到始终存在的文档元素上。

编辑：看到你的标记后，我相信问题也可能是内联onclick事件使用return false;，这可能会阻止事件在链上进一步冒泡。

于 2012-11-14T19:41:43.503 回答
1

.click()您说，当您从 Firebug运行原始代码时，它可以工作。

正如 iMoses 所指出的，它不适用于 Greasemonkey 脚本，因为该脚本在页面的 javascript 创建目标节点之前触发。

您还报告该.on()代码在脚本或 Firebug 中都不起作用。这意味着onclick您的目标节点 ( ticketEditTableView()) 的功能是停止事件冒泡。它可能会调用event.stopPropagation().

解决方案是返回，.click()但在将目标节点添加到页面时应用它。这可以通过waitForKeyElements() 实用程序来完成。

这是一个完整的脚本，用于在将这些节点添加到页面waitForKeyElements时绑定.click()到这些节点：

// ==UserScript
// @name        Desk Notifications
// @description Displays special notifications to NVOWS coaches at desk.com
// @downloadURL http://www.example.com/deskNotifications.user.js
// @include     http://nvows.desk.com/agent
// @namespace   http://www.example.com/userscripts
// @updateURL   http://www.example.com/deskNotifications.meta.js
// @version     0.1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant GM_addStyle directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (
    ".interaction_type_60, .interaction_type_40", addAlertOnClick
);

function addAlertOnClick (jNode) {
    jNode.click (alertOnClick);
}

function alertOnClick (zEvent) {
    var targNode    = $(zEvent.currentTarget);
    var messageStr  = "Oopsie!";

    if (targNode.hasClass ("interaction_type_60") ) {
        messageStr  = "You clicked a type 60 case!"
    }
    else if (targNode.hasClass ("interaction_type_40") ) {
        messageStr  = "You clicked a type 40 case!"
    }

    alert (messageStr);
}
于 2012-11-15T09:59:16.997 回答