I'm currently working on detecting a click event on a list element using JavaScript, with a slight complication. The list element is located within a dropdown menu from a search bar on Quora. www.quora.com - Specifically, I am interested in identifying when a user clicks the "add question" button and triggers the popup box to appear.
The popup box contains additional div elements that are either hidden or dynamically generated. The HTML structure for the list items is as follows:
<li class="addquestionitem" id="__w2_FWrLuSU_list_item_11">
When hovering over this particular list item, its class changes to:
<li class="addquestionitem selected" id="__w2_FWrLuSU_list_item_11">
Currently, my code snippet looks like this:
$("li[class='addquestionitem selected']").click(function() {
$(document).ready(function(){
alert('this link has been clicked');
$("div[id$=_publish_checkboxes]").append(element);
}
However, even the alert message is not being displayed. Any suggestions?
Update None of the suggested solutions below have proven successful. I also tried testing it with the "create board" button on the Quora homepage, which triggers a similar CSS-based popup. It worked in that scenario. Here's the selector I used:
$("a[class='add_content_link action_button icon_action_button']")
I fail to see why it wouldn't work with the "add question" button in a comparable context.
Update 2 Here's the content of the manifest file:
{
"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"]
}
]
}