在单击事件中插入链接

Question

我有一个脚本，人们点击‘呼叫我们’和号码出现，并发送GA事件。

是否可以将该号码链接到tel:-link，这样您就可以在手机上呼叫该号码？

我试着插入一个ID，但是这个号码在电话上是无法点击的。

谢谢你的回答，Dav

脚本是这样的：

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');
});

老实说，我认为一个更好的解决方案是直接在超文本标记语言中添加<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>

​