It turns out re-rendering or rendering ajax’d into place Pinterest buttons is quite straight forward. Not that you can find this in the Pinterest docs…
Update the way you include the Pinterest js:
<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>
The defer
defers loading of the script until after the page has loaded. The important bit is the data-pin-build
attribute. This makes the pinit.js
expose its internal build
function as parsePins
on the global window
object.
And then to use:
// parse a DOM element
window.parsePins($("#element")[0]);
// parse the whole page
window.parsePins();
The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.
And thats it.