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

これを試してください。

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

これは、ドキュメントまたは親コンテナーのいずれかに委任する必要があるイベントのようです。クリック機能はすぐにバインドされます。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 に答える
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

おそらく、.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

その要素のイベント リスナーを見ると (要素を選択し、[要素] パネルの右側にある [イベント リスナー] を見て、その要素を対象とするイベントとそのマウスダウンを探します)、クリックを使用していないことに気付くでしょう。しかし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 に答える