0

我正在尝试检测对 Javascript 中列表元素的点击 - 但有一个转折。列表元素位于 Quora 搜索栏中的下拉列表中。www.quora.com - 具体来说，我想检测用户何时单击添加问题按钮并打开弹出框。

在此处输入图像描述

弹出框由一些隐藏或动态生成的额外 div 组成。列表的 html 看起来像

<li class="addquestionitem" id="__w2_FWrLuSU_list_item_11">

当我将鼠标悬停在该特定列表元素上时，它变为

<li class="addquestionitem selected" id="__w2_FWrLuSU_list_item_11">

现在，我的代码如下所示： 

$("li[class='addquestionitem selected']").click(function() {
    $(document).ready(function(){
        alert('this link has been clicked');
        $("div[id$=_publish_checkboxes]").append(element);
    }

但即使是警报也没有出现。有什么建议么？

更新 下面发布的解决方案似乎都不起作用。我还使用 quora 主页上的创建板按钮进行了测试，单击该按钮会产生类似的嵌入 css 的弹出窗口。它在那里工作。具体来说，我使用的选择器是：

$("a[class='add_content_link action_button icon_action_button']")

真的不明白为什么它不适用于带有添加问题按钮的可比较案例

更新 2 这是清单文件。：

{
    "name": "A browser action with a popup that changes the page color.",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Set this page's color.",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs", "http://www.quora.com/*"
    ],
    "background": {
        "page": "popup.html"
    },
    "content_scripts":[
        {
            "matches": ["http://www.quora.com/*"],
            "js": ["jquery.js", "read_in_array.js", "add.js", "popup.js"]
        }
    ]
}
4

5 回答 5

0

有什么建议么？

您需要将 $.ready 函数包装在其他所有内容上。另外，由于下拉菜单可能是动态构建的，我建议使用委托事件。接下来，您的类选择器看起来很奇怪，我认为您也可以简单地省略selected该类。

$(document).ready(function(){
    $(document).on("click", "li.addquestionitem", function() {
        alert('this link has been clicked');
        $("div[id$=_publish_checkboxes]").append(element);
    });
});
于 2012-08-05T06:07:43.053 回答
0

试试这个；

$(document).ready(function(){
    $('.addquestionitem').live('click', function(){
        alert('this link has been clicked');
        $("div[id$=_publish_checkboxes]").append(element);
    });
});
于 2012-08-05T16:05:04.280 回答
0

如果您查看该元素的事件侦听器（选择该元素，然后在“事件侦听器”的“元素”面板中查看右侧，并查找针对该元素及其鼠标按下的事件），您会注意到它们没有使用单击，但是mousedown。所以我猜它发生在你之前，也许他们阻止它冒泡，不确定，但将你的事件更改为mousedown它会触发。此外，在 dom 准备好之后，此元素可能无法立即使用（不确定那个），因此您可能必须使用 setTimeout 来继续检查元素、突变观察者或站点特定的东西。

// wait for the element to exist then do your thing
var wait = function() {
    if ($("li.addquestionitem").length > 0) {
        console.debug('found it');
        $('.addquestionitem').live('mousedown', function() {
            alert('this link has been clicked');
            $("div[id$=_publish_checkboxes]").append(element);
        });
    } else {
        setTimeout (waiting, 500);
    }
}
wait();
于 2012-08-06T04:26:28.417 回答
0

这可能是因为.click()事件监听器没有任何东西可以触发，因为它正在等待$(document).ready()，这在点击之前已经发生了。

尝试这个：

$(document).ready(function(){
    $("li[class='addquestionitem selected']").click(function() {
        alert('this link has been clicked');
        $("div[id$=_publish_checkboxes]").append(element);
    });
});
于 2012-08-05T06:08:30.283 回答
0

这看起来像是一个需要委托给文档或父容器的事件。您的 click 函数立即被绑定，如果 li 没有 selected 类，它将不会被绑定。因此，要通过父级收听点击，请执行以下操作：

$(document).ready(function(){
    $("#__w2_FWrLuSU_results_list").on("click", "li.addquestionitem", function()
    {
        alert('this link has been clicked');
        $("div[id$=_publish_checkboxes]").append(element);
    });
}
于 2012-08-05T06:14:30.967 回答