Question

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

enter image description here

弹出框由一些隐藏或动态生成的额外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"]
        }
    ]
}

Answer 1

有什么建议吗？

您需要将$ .ready函数包装在其他所有内容中。此外，由于下拉列表可能是动态构建的，我建议使用delegated events。接下来，您的类选择器看起来很好奇，我想您也可以简单地省略selected类。

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

Answer 2

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

试试这个：

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

Answer 3

这看起来像是需要委托给文档或父容器的事件。你的点击功能立即被绑定，如果li没有选中的类，它就不会被绑定。因此，要通过父级收听点击，请执行以下操作：

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

Answer 4

试试这个;

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

Answer 5

如果您查看该元素的事件列表器（选择元素，然后在“事件列表器”的“元素”面板中查看右侧，并查找以该元素为目标的事件及其在mousedown上的事件）您会注意到它们不是使用点击，但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();

使用扩展程序javascript检测动态下拉框中的点击

5 个答案: