jQuery不会使用动态DOM/HTML

前端之家收集整理的这篇文章主要介绍了jQuery不会使用动态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中的代码:(当页面加载时注入我的脚本,以及当tab /窗口被更改时,应该在那里。注意: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
  }
]
}

解决方法

$('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,则跟踪将更有效:

$('#foo').on("click",function() ...

猜你在找的jQuery相关文章