javascript - chrome 插件中 content_scripts 对异步加载的元素无效？

Question

开发 chrome 插件，使用 content_scripts 对页面元素写入点击事件，例如

$(".item").on("click",function(){
    console.log("test");
});

控制台输出 test ，但是当元素是以异步形式加载进来的（例如页面中点击 more 异步加载新的内容），此时新加载的 .item 元素是不响应事件的， 使用 jquery-2.1.4 版本，on 方法绑定，chrome 版本为 46.0.2490.74。

请问如何解决？

Answer 1

那就监听异步加载完成事件，完成后对新添加的元素执行监听。
对不存在元素添加监听是无效的。
这也是jquer代码要在DOM元素加载完成后再执行的原因~

如果异步加载不是由你的插件触发的，那么你需要定时check插件的宿主页面的特定元素是否已经在DOM树中了。
因为你的插件和宿主页面之间不能共享JS脚本，也就是你无法监听不是你的插件发起的异步请求的结果，但可以共享DOM树

function checkItemExisted(){
    return $('.item').length>0;
}
function timerFunc(){
   setTimeout(function(){
      if(!checkItemExisted){
          timerFunc();
      }
    },1000);
}

timerFunc();