jQuery .on不适用于动态DOM/HTML [英] jQuery .on not working with dynamic DOM/HTML

问题描述

我不确定完全这是否是由于我的清单设置所致，还是.on事件和页面上正在动态生成内容/修改内容的页面发生了某些事情，但是我遇到了绊脚石.

I'm not exactly sure if this is due to my manifest setup, or if there's something going on with the .on event and pages that generate content/modify content on the fly, but I've run into a stumbling block.

这是一个基本思想:我希望能够捕捉到一个与模式匹配的URL的链接，而无论用户在哪里/正在查看的页面是什么(并执行其他操作而不是导航到该页面)链接).我遇到的问题是，在加载内容(jQuery的$(document).ready)(例如gMail)之后，我的监听器无法在任何修改其内容的页面上运行.我在各处注入我的JavaScript，但仍然无法正常工作.

Here's the basic idea: I want to be able to catch a click on any link with a URL that matches a pattern regardless of where the user is/what page they're looking at (and do other stuff instead of navigating to the link). The problem I'm running into is that my listener won't work on any page that modifies its content after content loads (jQuery's $(document).ready) (e.g. gMail). I'm injecting my javascript all over the place and it's still not quite working.

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

Here's the listener code (in main.js):

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

这是我background.html中的代码:(在页面加载以及将选项卡/窗口更改为时注入我的脚本，因此它应该在其中.注意:上面包含了jQuery，以及我需要的所有本地.js文件)

Here's the code in my background.html: (injects my script when the page loads as well as when the tab/window is changed to, so it should be there. Note: jQuery is included above, along with all of the local .js files I need)

<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 的页面中，侦听器不会赶不上活动.我最初将其作为内容脚本使用，但是最近我将其移至使用后台和以编程方式进行注入，但似乎都无法正常工作.

But in pages like gMail or this, the listener doesn't catch the event. I originally had this as a content script, but I recently moved it to using background and programmatically injecting, but neither seem to be working quite right.

这是我的清单，供参考:

Here's my manifest, for reference:

{
"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
  }
]
}

推荐答案

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

仅适用于呈现页面时已存在的锚点，而不适用于动态添加的锚点.上面与

Will only work with anchors that are already present when the page is rendered—not dynamically added anchors. The above is exactly identical to

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

---

这是将on与动态添加的内容一起使用的方式:

---

Here's how you use on with dynamically added content:

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

这将创建一个授权事件.将检查在文档后代(即所有内容)中发生的所有单击，以查看该单击的来源是否与选择器匹配.如果是这样，您的事件将触发.这就是为什么它可以与动态添加的内容一起使用的原因.

This creates a delegated event. All clicks that happen in descendants of your document (which is everything) will be inspected to see if the source of the click matches your selector. If it does, your event will fire. That's why it works with dynamically added content.

理想情况下，如果您可以保证所有这些锚点都位于某个容器(例如ID为foo的div)内，则执行以下操作会更有效:

Ideally, if you can guarantee that all of these anchors will be inside of some container, say, a div with id foo, the follow would be more efficient:

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

这篇关于jQuery .on不适用于动态DOM/HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！