Dynamically show/hide Facebook like button

Here is my problem:

I have successfully included the Facebook Like button on my test page. There are several items per page and there is a facebook like button per item. I am using the XFBML version.

Everything runs fine if the buttons are present in the page on load. However, Now I want to show the buttons per item only on mouseover on the container element having the item and the button.So, the fblike button html is hidden on page load and I added some code like this to sh开发者_StackOverflow社区ow them on mouse-hover:

    $(content).mouseenter(function(){
      $(this).find('.fblike').show(); // toggle the display of the button

      FB.XFBML.parse( this ); //re-parse xfbml
    });

The button shows up perfectly on mouse-hover on the container now but never works. Clicking the button doesn't do anything.

Has anyone run across this problem before ?

EDIT:

.fblike is a class on a div containing the fb:like tag.

Re-parsing is required because on page-load, each div with the class .fblike is hidden. The Facebook JavaScript SDK doesn't parse the xfbml tags inside elements which are hidden.

I think you problem is in this variable scope. Try this:

FB.XFBML.parse($(this));

Because you don't need this (anonymous function being called) but element (on which this anonymous function was called).