jQuery .on不使用动态DOM / HTML
我不确定这是否是由于我的清单设置，或者是否有关于.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中的代码:(在页面加载时以及更改选项卡/窗口时注入我的脚本，因此它应该在那里。 注意 ：上面包含了jQuery，以及所有本地.js我需要的文件）
$(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"}); } });
但是在像gMail 这样的页面中，监听器不会捕获事件。 我最初把它作为一个内容脚本，但我最近把它转移到使用背景和编程注入，但似乎都没有正常工作。
这是我的清单，供参考：
{ "name": "SkedjoolMi", "version": "0.5", "description": "Automated Google Calendar event scheduling", "background_page": "background.html", "permissions": [ "tabs","http://*/","https://*/" ], "content_scripts": [ { "matches": [""], "js": ["jquery-1-7-1.js"], "run_at": "document_end", "all_frames": true } ] }
$('a[href^="http:.......').on('click', function() { ...
仅适用于呈现页面时已存在的锚点 – 不动态添加锚点。 以上完全相同
$('a[href^="http:.......').bind('click', function() { ...
以下是您使用动态添加内容的方式：
$(document).on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...
这会创建一个委托事件 。 将检查文档后代（即所有内容）中发生的所有点击，以查看点击源是否与您的选择器匹配。 如果是这样，您的活动将会激活。 这就是它适用于动态添加内容的原因。
理想情况下，如果你可以保证所有这些锚点都在某个容器内部，比如一个id为foo的div，那么follow会更有效：
$('#foo').on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...
我不确定这里的确切上下文 – 听起来因为外来域安全而无法跳过IFRAME边界。
我会尝试一个计时器，试图收集你的目标内的任何东西（DOM的gmail doc部分），如果你能做到这一点，你可以通过滚动你自己的监视器来解决jQ live的无法解决问题（将绑定的链接存储在一个数组中） ）。