jQuery .on不使用动态DOM / HTML

时间:2012-01-15 02:46:06

标签: jquery

我不是确切地确定这是因为我的清单设置,还是.on事件发生了什么,以及动态生成内容/修改内容的页面,但我已经遇到了绊脚石。

这是基本的想法:我希望能够点击任何链接,其中包含与模式匹配的URL,无论用户位于何处/他们正在查看哪个页面(并执行其他操作而不是导航到链接)。我遇到的问题是我的监听器不能在内容加载后修改其内容的任何页面上工作(jQuery的$(document).ready)(例如gMail)。我正在整个地方注入我的javascript,但它仍然不能正常工作。

这是监听器代码(在main.js中):

$('a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]').on('click', function(event) 
{
  event.preventDefault();
  SKDMmain(this);
});

以下是我的background.html中的代码:(在页面加载时以及更改选项卡/窗口时注入我的脚本,因此应该在那里。注意< / strong>:上面包含了jQuery,以及我需要的所有本地.js文件)

<script type="text/javascript">
  $(document).ready( function(){
    chrome.tabs.executeScript(null,{file:"main.js"});
  });
  chrome.tabs.onActiveChanged.addListener( function(tabID,somethingElse){
      chrome.tabs.executeScript(tabID,{file:"main.js"});
  });   

  chrome.windows.onFocusChanged.addListener( function(windowID){
    if ( windowId != chrome.windows.WINDOW_ID_NONE ) {
      chrome.tabs.executeScript(null,{file:"main.js"}); 
    }
  });
</script>

但是在gMail或this这样的页面中,侦听器不会捕获该事件。我最初把它作为一个内容脚本,但我最近把它转移到使用背景和编程注入,但似乎都没有正常工作。

这是我的清单,供参考:

{
"name": "SkedjoolMi",
"version": "0.5",
"description": "Automated Google Calendar event scheduling",
"background_page": "background.html",
"permissions": [
  "tabs","http://*/","https://*/"
],
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery-1-7-1.js"],
    "run_at": "document_end",
    "all_frames": true
  }
]
}

2 个答案:

答案 0 :(得分:66)

$('a[href^="http:.......').on('click', function() { ...

仅适用于呈现页面时已存在的锚点 - 不动态添加锚点。以上与

完全相同
$('a[href^="http:.......').bind('click', function() { ...

以下是您使用on动态添加内容的方式:

$(document).on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...

这会创建委派的事件。将检查文档后代(即所有内容)中发生的所有点击,以查看点击源是否与您的选择器匹配。如果确实如此,您的活动将会激活。这就是它适用于动态添加内容的原因。

理想情况下,如果您可以保证所有这些锚点都位于某个容器内,例如ID为foo的div,则后续效率会更高:

$('#foo').on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...

答案 1 :(得分:0)

我不确定这里的确切上下文 - 听起来因为外来域名安全而无法跳过IFRAME边界。

我会尝试一个计时器,试图在你的目标中收集任何东西(DOM的gmail doc部分),如果你能做到这一点,你可以通过滚动自己的监视器解决jQ live的无法解决问题(存储绑定的链接)在一个数组)。