Question

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.

Answer 1

You say you’ve ran the code on the firebug console and it works fine, which leave very little options here.
I believe that the HTML tags you are trying to add those events to haven’t been created yet. This will happen if those elements are created via JavaScript and the code which creates them hasn’t run yet. Another possibility is that the elements are on the DOM but haven’t received those classes yet, also might happen if the classes are given using JavaScript.

Give this code sample a try, see if it helps (let me know the results):

$(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!"); 
        }); 
});

Notice: The elements you are trying to attach those events to MUST be present on the DOM when your original code run and they must have the classes you defined. What my code does is attached the event to the document element and looks for a click event bubbling up the chain of elements, allowing you to add new elements containing those selector and the listeners will be called without you needing to attach the event handler specifically to those elements.

P.S.

In this specific case you don’t even need the $(document).ready(..) part. You can just use:

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

Because the events are attached to the document element which is always present.

Edit: After seeing you markup I believe the problem may also be that the inline onclick events use return false; which might be preventing the events from bubbling further up the chain.