EventListener not working with anchor tel:XXXXXXXXX

Question

I have a tag with href="tel:XXXXXXXXX" , and I need catch the click event.

I have tested the following code on chrome: $(document).on('click',console.log) . If i click on this tag browser it calls the application, but does not trigger a click event.

$("a[href^='tel']").on('click', console.log);

This is working, but I my have a problem with content load by ajax. My code has loaded a page and after some time application added content by ajax. When i use $(document).on('click', ("a[href^='tel']", console.log) , there is a problem.

Answer 1

$("a[href^='tel']").on("click", function(e){
    e.preventDefault(); e.stopPropagation();
    console.log(this);
    alert(this.getAttribute("href"));
})

//or if you want to delegate your function
$(document).on('click', "a[href^='tel']", function(e){
    e.preventDefault(); e.stopPropagation();
    console.log(this);
    alert(this.getAttribute("href"));
});

This will bind an event listener to all click on a tags with a href attribute and prevent the click itself. After click, you'll be able to use your console to see which element was click and what href was used.

Answer 2

i think this will help

$("a").click(function(e) {
    e.preventDefault();
    alert('clicked');  
    window.location.href = 'tel:+496170961709';
});

Answer 3

Ok, i found resolve. I use earlier event "mousedown" and change attr "href" to "only number" for disable action click.

Code:

const click2dial_Event = function(e) {
    e.preventDefault();

    let a = $(this), number;

    if (a.attr('href') !== '#') {
        number = a.attr('href');
        number = number.substr(4);

        a.attr('href', '#');
        a.attr('data-dial', number)
        a.addClass('click-to-dial');
    } else {
        number = a.attr('data-dial');
    }

    //...
};

$(document).on('mousedown', "a[href^='tel']", click2dial_Event);
$(document).on('mousedown', '.click-to-dial', click2dial_Event);

Answer 4

This would get the phone number from the a tag starting with a value of tel upon clicking it.

$("a[href^='tel']").on("click", function(e) {  
    var hrefText = this.getAttribute("href");
    var str = hrefText;
    var res = str.split(":");
    alert(res[1]);
});

Answer 5

On Initial Load

I would first recommend that you wait for the initial DOM to be ready before binding any events to elements.

// DOM ready shorthand
$(function() {
  $("a[href^='tel']").on('click', function(e) {  
    // Do work here
  });
});

AJAX Content

If you are adding additional elements after the initial load you will have to bind events to those new elements as well.

You could also do something like adding a data attribute to the elements that you've bound click events to and only add to ones that don't yet have that data attribute - but that's additional unnecessary work.

Full Example Code

// DOM Ready Shorthand
$(function() {
  // Click Handler
  function clickEvent(e) {
    // Do work here
  }

  // Bind click event to initial tels
  $("a[href^='tel']").on('click', clickEvent);

  // Arbitrary AJAX request for demonstration (wherever yours may be)
  $.ajax('/newContent')
    .done(function(html) {
      // Adding our response HTML to the page within #someElement
      $('#someElement').append(html);
      // Bind click event to the new tel elements scoped to the returned html
      $("a[href^='tel']", html).on('click', clickEvent);
    });
});