Dynamic (ajax) content loading, facebook share button disappears - ajax

Question

so in the text (article) I have this:
<div id="fb-root"></div>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/hu_HU/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="facebook_share_wrapper">
<div class="fb-share-button"
data-href="http://www...."
data-layout="button">
</div>
</div>
for the first time, it loads well! But for the 2nd time, after the ajax finished:
setTimeout(function() {
console.log(FB.XFBML.parse());
}, 3000);
as you can see, I gave an extra timing. But the facebook share button wont appear! Many similar problems were solved with FB.XFBML.parse, but not mine...

Answer 1

I assume you try to load the JS SDK dynamically too, but JS will not get called if you just add it to the DOM (with innerHTML, for example). Also, you don´t initialize any App.
The solution:
Load the JS SDK on page load - one time only
Initialize your App with FB.init
Use FB.XFBML.parse() in the callback of your AJAX call, right after adding the share button to the DOM
Additional information and an example how to load the JS SDK: https://developers.facebook.com/docs/javascript/quickstart
Important: Do not work with setTimeout, that´s just a very bad workaround.