0

last.fm API を使用して chrome エクステンションを作成しようとしていますが、表示したいページに次の div を配置することに成功しました。

<div id="showLastFMInfo" Title="More info about song" class="LastFMButtonDown">&raquo;</div>

しかし、それをクリックしても何も起こりません。これは使用されているJSです：

$(document).ready(function () {
    // this get executed
    $('#meta-frame').append('<div id="showLastFMInfo" Title="More info about song" class="LastFMButtonDown">&raquo;</div>');

    // this won't work if I click on my button
    $("#showLastFMInfo").click(function(){
        console.log("Click");
    });
});

したがって、最初の行が実行されるのを見ることができますが、.click() は反応しません。

これは私のmanifest.jsonです：

{
   "content_scripts": [ {
      "js": [ "jquery.js", "lastfm.api.cache.js","lastfm.api.md5.js", "lastfm.api.js","lastFMLink.js", "script.js"],
      "css": [ "LastFMLink.css" ],
      "run_at": "document_end"
   } ],

   "name": "Plug.Dj VS last.Fm",
   "description": "Implement information about the artist",
   "icons": { "16": "cookie.png", "48": "cookie.png", "128": "cookie.png" },
   "version": "0.0.1",
   "web_accessible_resources": [ "lastFMLink.js" ],
   "manifest_version": 2
}

誰かが私が間違っていることを知っていますか?

4

3 に答える 3

6

追加しているので動的であり、委任されたイベント ハンドラーが必要です。

$('#meta-frame').on('click', '#showLastFMInfo', function(){
    console.log("Click");
});

一方、要素が追加された後にイベント ハンドラーを追加しても機能するはずですか?

于 2013-02-26T16:02:14.490 に答える
0

これらの動的に生成されたコンテンツの使用

    $("a.offsite").live("click", function(){ alert("Goodbye!"); });                // jQuery 1.3+
    $(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  // jQuery 1.4.3+
    $(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        // jQuery 1.7+

live と delegate は推奨されないため、.on() の使用をお勧めします。

于 2013-02-26T16:08:29.850 に答える
0

ドキュメントまたは最も近い静的要素を使用してください

$(document).on('click','#showLastFMInfo',function(){

});
于 2013-02-26T16:01:48.457 に答える