.prepend() to all links with pageMod and jQuery on dynamic pages

Question

I'm trying to .prepend() an image to every google search result link with pageMod. It works fine for the first result page, but not when loading other pages or editing the search terms. that's because my script is loaded at the end of the page and dynamic content change won't load my script again. How can I work around this?

index.js

var self = require("sdk/self");
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: /^https?:\/\/.*\.google\..+/,
  contentStyleFile: self.data.url("style.css"),
  contentScriptFile: [self.data.url("jquery.min.js"), self.data.url("script.js")]
});

script.js

$('.r a').each(function(index) {
  var main = "http://****.***";
  var url = $(this).attr('href');

  $(this).prepend("<img width='16px' height='16px' src='" + main + url + "'> ");
})

Answer 1

you should use MutationObserver on the parent element that hosts the search results

var Col = document.getElementById('center_col');
if(Col) {
    var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // perform prepend image  
        }                       
    });    
    });                  

    var cfg = { attributes: true, attributeFilter : ['style'], childList: false };                    
    observer.observe(Col, cfg); 
}