Search code examples
htmljquerydata-binding

Is it possible give an href="mailto:" the value of a data-bind: text?

I am trying to give the value of an data-bind: text function to the href="mailto:" but can't seem to get it right.

My Code so far:

HTML:

<a href="#" class="mailCloseBranch" data-bind="text: closestBranch().email">someEmailFromDataBind.com
</a>

Replacing Value of href:

$("a.mailCloseBranch[href$='#']").each(function() {
  var ref = document.getElementsByClassName('mailCloseBranch')[0].value;
  var mailref = 'mailto:' + String(ref);

  this.href = this.href.replace("#", mailref);
});

The 'mailto:' string from var mailref gets insertet and the correct email is displayed in the

<a> element

but the value of var ref stays undefined which in turn leads to no link to "mailto".

Solution

  • Perhaps these might offer some insights?

    Within the bound functions you can use this to access the hyperlink directly and thus access it's properties rather than use document.getElementsByClassName('mailCloseBranch')[0].value (which would be wrong ) or document.getElementsByClassName('mailCloseBranch')[0].textContent

    // using the LINK TEXT to form part of the new href
$("a.mailCloseBranch[href$='#']").each( function() {
    this.href = this.href.replace("#", 'mailto:' + String( this.textContent ) );
});

// using the DATA.BIND attribute value to form part of the new href
$("a.mailCloseBranch-2[href$='#']").each( function() {
    this.href = this.href.replace("#", 'mailto:' + String( this.dataset.bind.replace('text:','') ) );
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a href="#" class="mailCloseBranch" data-bind="text:closestBranch().email">someEmailTextcontent.com</a> |


<a href="#" class="mailCloseBranch-2" data-bind="text:closestBranch().email">emailfromDataBind.com</a>