title: FB.XFBML.parse() on individual element does nothing
body: <p>I have a big page with a "load more" button at the bottom; each click on "load more" loads more content via AJAX. Part of that content is Facebook like buttons:</p>
  
  <pre><code>&lt;div class="fb-like" data-href="http://mysite.com/a&lt;?=$x ?&gt;" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>After loading the additional content, I can ask Facebook to re-parse the entire page with <code>FB.XFBML.parse();</code> (which causes those divs to turn into actual like buttons). This works perfectly, however, it gets slow right away, since Facebook re-parses the content that was already on the page, not just the new content. Every time the user clicks "load more" it parses the entire page, so there's just more and more for the FB function to do.</p>
  
  <p>Now here's the good news: the <a href="https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/">docs for FB's parse method</a> say:</p>
  
  <blockquote>
    <p>...to only evaluate a portion of a document, you can pass in a single
    element.</p>
    
    <p><code>FB.XFBML.parse(document.getElementById('foo'));</code></p>
  </blockquote>
  
  <p>So I thought, okay, when the user clicks "load more," I'll wrap that fresh HTML in a unique <code>div</code>, then use jQuery to walk through the <code>div</code>, find all the Facebook tags and ask Facebook to parse just those. Good idea, right? But it doesn't work. The code seems to be passing the elements to Facebook after they're loaded, but they aren't parsing. Code:</p>
  
  <pre><code>// "c" is my container div (a jQuery object, i.e. c = $('#container'); ) 
  // "load more" button
  $('#loadmore').click(function() {
      $.ajax({
          url: "/loadmore.php",
          success: function(html) {
              if(html) {
                  // wrap new HTML in special div &amp; append
                  newDivName = "d"+String(new Date().valueOf());
                  var $newHtml = $("&lt;div id='"+newDivName+"'&gt;"+html+"&lt;/div&gt;");
                  c.append($newHtml);
  
                  // walk through new HTML and get all Facebook "like" buttons and parse them
                  $('#'+newDivName+' .fb-like').each(function() {
                      FB.XFBML.parse(this);
                  });
              }
          }
      });
  
  });
  </code></pre>
  
  <p>There's no error message, it just doesn't produce any results. The debug code to the console looks perfect, it's finding all the right elements.</p>
  
  <p><strong>UPDATE</strong>
  play with it at this simple jsfiddle: <a href="http://jsfiddle.net/pnoeric/NF2jz/4372/">http://jsfiddle.net/pnoeric/NF2jz/4372/</a></p>
  
  <p><strong>UPDATE 2</strong> I also tried changing the code from HTML5 to FBML (<a href="https://developers.facebook.com/docs/reference/plugins/like/">click "Get Code" on this page</a> to see the difference), which not only had the same result but now also would only load one additional button on the ajax call, instead of two. So it got worse! You can play with the FBML version here: <a href="http://jsfiddle.net/pnoeric/4QkbX/2/">http://jsfiddle.net/pnoeric/4QkbX/2/</a></p>