How can I use Tumblr elements with Javascript?

Question

How can I use Tumblr elements such as {Permalink} with Javascript?

Specifically to add a link to certain elements.

My javascript:

<script type="text/javascript">

        $('.takemethere').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="{Permalink}"></a>');
});

    </script>

The HTML:

{block:Photo}

<div class="takemethere"><img src="{PhotoURL-500}" width="50px" height="50px" alt="{PhotoAlt}"/></div>

{block:caption}{Caption}{/block:Caption}

{/Block:Photo}

The {Permalink} element doesn't work as a link. It just refreshes the page when I click on the content that I have wrapped this link around.

Answer 1

You don't need javascript , use the {Permalink} theme operator directly in your theme:

{block:Photo}

<a href="{Permalink}">
  <img src="{PhotoURL-500}" width="50px" height="50px" alt="{PhotoAlt}"/>
</a>

{block:caption}{Caption}{/block:Caption}

{/Block:Photo}

Reference: https://www.tumblr.com/docs/en/custom_themes#posts