在点击事件中插入链接

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 隐藏它，直到被点击。您所做的大部分工作并不需要 JavaScript：

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>