jQuery .click（）可在Firebug中使用，但不能使用Greasemonkey脚本吗？

Question

我试图在Firefox中使用Greasemonkey编写我的第一个用户脚本。 我已经做了很多研究，因为我是用户脚本和jQuery的新手，但似乎无法使这个简单的测试脚本正常工作。 到目前为止，我在Test.user.js文件中有此文件：

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

我需要它做的事情显然要复杂得多，但是由于我是jQuery和用户脚本的新手，所以我只想先完成这项工作。 到目前为止，“脚本已加载”。 正在显示，以便排除许多可能的问题。 当我仅在Firebug中运行这部分代码时，它可以正常工作：

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

这样就排除了代码错误或使用了错误的类选择器。 如果代码正确且正在执行，我看不出是什么问题。 如果有人可以帮助，将不胜感激。 我不是编程的新手。 只是基于网络的东西。

这是HTML页面的一部分，单击该部分后我会尝试查看它。

<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>

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

更新：我只是想这样做进行测试：

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

我一直试图单击的内容是未显示消息的内容。 页面加载后，所有页面都将使用javascript加载。 我几乎是肯定的，这就是它们不允许我单击它们的原因。 有没有一种方法可以单击这些项目。 在HTML脚本中，它们看起来与其他元素相同。

Answer 1

您说您已经在firebug控制台上运行了代码，并且运行正常，在这里只留下了很少的选择。 我相信您尝试添加这些事件的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元素上，并寻找使元素链冒泡的click事件，从而允许您添加包含那些选择器的新元素，并且无需专门将事件处理程序附加到该事件处理程序即可调用侦听器。这些元素。

PS

在这种情况下，您甚至不需要$(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; onclick 这可能会阻止事件在整个链条中冒泡。

Answer 2

您说的是，当您从Firebug运行原始的.click()代码时，它将起作用。

正如iMoses指出的那样，它不能在Greasemonkey脚本中运行，因为该脚本在页面的javascript创建目标节点之前就已触发。

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

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

这是一个完整的脚本 ，该脚本使用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);
}