クリックイベントにリンクを挿入する

Question

私は「電話してください」というボタンをクリックして数字が表示され、GAイベントが送信されるスクリプトがあります。

番号をtel：-linkにリンクして、携帯電話で番号を呼び出すことはできますか？

IDを挿入しようとしましたが、電話で番号をクリックできませんでした。すべての答えを

おかげで、 ダヴ

これはスクリプトです：

function ipTrackButton(){ 
    if(window.jQuery){ 
     var $ = jQuery; 

     var phonenumber = '+31 (0)20 - 679 62 22', 
      holder = $('#text-5 > .textwidget'), 
      newHTML = 'T: <span id="ipCallButton">Bel ons | Call us</span><br>E: <a href="mailto:info@pvhadvocaten.nl">info@pvhadvocaten.nl</a>', 
      body = $('body'); 

     //Inject styles 
     var style = '#ipCallButton { background-color:#eaeaea;padding:5px 8px;cursor:pointer;text-decoration:underline; } #ipCallButton.ipClicked { text-decoration:none;cursor:default; } '; 

     body.append('<style>'+style+'</style>'); 

     //Set new content 
     holder.html(newHTML); 

     //Set event 
     body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
      var _this = $(this); 
      _this.html(phonenumber); 
      _this.addClass('ipClicked'); 

      //Send event 
      ga('send', 'event', 'Contact', 'Click', 'Telefoonnummer'); 
     }); 
    } 
    else { 
     setTimeout(ipTrackButton, 50); 
    } 
} 

ipTrackButton(); 

Answer 1

あなたのコードの問題は、どの時点で、あなたは<a href="tel:...">要素を作成しないということです。あなたがするのは、要素のinnerHTMLをクリックできない電話番号に設定することだけです。

あなたが実際に<a>要素を挿入する必要があります：

body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
    var _this = $(this); 
    _this.append($('<a href="tel:' + phonenumber + '">' + phonenumber + '</a>')); 
    _this.addClass('ipClicked'); 
    //Send event 
    ga('send', 'event', 'Contact', 'Click', 'Telefoonnummer'); 
}); 

は正直に言うと、私はよりよい解決策は、HTMLで直接<a>を追加し、クリックするまでCSSでそれを隠すためになると思います。あなたの答えのための

function ipTrackButton(){ 
 
    if(window.jQuery){ 
 
     var $ = jQuery; 
 
     var body = $('body'); 
 

 
     //Set event 
 
     body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
 
      var _this = $(this); 
 
      _this.addClass('ipClicked'); 
 
      // removed: send ga event 
 
     }); 
 
    } 
 
    else { 
 
     setTimeout(ipTrackButton, 50); 
 
    } 
 
} 
 

 
ipTrackButton();

#ipCallButton:not(.ipClicked) .afterclick { 
 
    display: none; 
 
} 
 
#ipCallButton.ipClicked .beforeclick { 
 
    display: none; 
 
} 
 
/* copied */ 
 
#ipCallButton { background-color:#eaeaea;padding:5px 8px;cursor:pointer;text-decoration:underline; } #ipCallButton.ipClicked { text-decoration:none;cursor:default; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
T: <span id="ipCallButton"> 
 
    <span class="beforeclick">Bel ons | Call us</span> 
 
    <span class="afterclick"> 
 
     <a href="tel:+31 (0)20 - 679 62 22">+31 (0)20 - 679 62 22</a> 
 
</span><br> 
 
E: <a href="mailto:info@pvhadvocaten.nl">info@pvhadvocaten.nl</a>