.click(function())未被调用

时间:2013-02-26 16:00:32

标签: javascript jquery api last.fm

我正在尝试使用last.fm api进行chrome扩展,并且我已经成功地放下了我希望它显示的页面中的fol 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
}

有没有人知道我做错了什么?

3 个答案:

答案 0 :(得分:6)

你要附加它,所以它是动态的,你需要一个委托的事件处理程序:

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

另一方面,在附加元素后附加事件处理程序也应该有用吗?

答案 1 :(得分:0)

使用文档或最接近的静态元素

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

});

答案 2 :(得分: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()。