如何在innerHTML中添加呼叫电话号码链接

Question

I am trying to add a call specific phone number using <a href> tag inside innerHTML . I've tried with double and single quotes.

1st Case is not firing at all.

2nd Case it does appear but when clicking on the phone number rather than dialing it closes.

 var popDiv = document.createElement('span');
           popDiv.setAttribute('class', 'popDiv');
           popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "<a href='tel:01234567890'>01234 567 890</a>";

Please find link to the JSFiddle

Does anyone know what a possible solution would be?

Answer 1

You need to check the mouseup event's target and if it's h1 , then only remove the popDiv . This should work :

$("#"+parentContainerId).on('mouseup', function(e){
    if(event.target.tagName.toLowerCase() === 'h1') {
        $('span.selectedText').contents().unwrap();
        $(this).find('span.popDiv').remove();
    }
});

Updated jsFiddle

Answer 2

Just try with that :

 var popDiv = document.createElement('span');
           popDiv.setAttribute('class', 'popDiv');
           popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "<a href=\"tel:01234567890\">01234 567 890</a>";

and be sure you have not any meta like that :

<meta name = "format-detection" content = "telephone=no">