title: How to use waitForKeyElements to display information after select images?
body: <p>I wrote a script that adds the number, contained in the image source URL, to the page. It works great!</p>
  
  <p>But, I also want it to run on a page that has AJAX-driven tabs.<br>
  I've tried playing around with <code>waitForKeyElements</code> but I can't figure out how to make it work, and I don't understand jQuery.  </p>
  
  <p>When I use <code>#dolls</code> it puts all contents of all tabs on the page... when I use <code>div.dolls</code> it disables the button to load the dolls.</p>
  
  <pre><code>// ==UserScript==
  // @name        Dex# of Pokedolls
  // @namespace   http://trueidiocy.us
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=collection
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=giveaway
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=regional
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=shop
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&amp;market=sell*
  // @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&amp;market=buy*
  // @include     http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=*
  // @version     1
  // @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
  // @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
  // @grant       none
  // ==/UserScript==
  
   waitForKeyElements (
   "div.dolls"           //also tried #dolls
  , showdexno
  );
  
  function showdexno (jNode) {
  var imgs = document.getElementsByTagName('img');     
  
  for (var i = imgs.length - 1; i &gt;= 0; i--) {
    if (imgs[i].src.indexOf('overworld') &gt; -1) {
       var textNode = document.createElement('b');
  
  var numtext=imgs[i].src.match(/\d+/g)
  
    textNode.innerHTML = numtext;    
    imgs[i].parentNode.appendChild(textNode, imgs[i]);     
   }
  } 
  }
  </code></pre>
  
  <p><br>
  I'm probably just not using the right syntax or something, but I'm totally lost.  </p>
  
  <p>I'm testing the script on <a href="http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=10220" rel="nofollow"><strong>this page</strong></a>, and it needs to trigger when the <kbd>Load Pokédolls</kbd> button is clicked on the <em>Pokédolls</em> tab.</p>
  
  <p>You can view that target page without having to login.</p>
  
  <p>I'm assuming that after I get this working I would just throw everything into an if statement:</p>
  
  <pre><code> If location is trainer card wait for tab
   else just run the code
  </code></pre>
  
  <p>So, what am I doing wrong?  How do I use <code>waitForKeyElements</code> for this?  Or is there another way?</p>
  
  <p>ETA: one more problem... On one page this shows the numbers right next to the pictures which is perfect - BUT - on other pages that have text under the images it adds it to the existing text. How do I make it be right next to the picture every time?</p>