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

这不是主题，也不是什么大问题，但如果您看到某些内容会使此用户脚本在非“http://nvows.desk.com”的页面上执行/agent' 然后让我知道。它说“脚本已加载”。每次我去 Stack Overflow 的时候。哈。

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

更新:我只是尝试这样做以进行测试:

$(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).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; 这可能会阻止事件在链上进一步冒泡。