如何用jQuery禁用动态加载内容中的tel:链接？现有静态方案无效

问题原因 #

原有代码仅将点击事件绑定到页面初始化时已存在的a[href^="tel:"]元素，后续动态生成的同类元素未被绑定事件，因此无法触发阻止默认行为的逻辑。

事件委托实现方案 #

事件委托需要将事件绑定到页面中始终存在的静态父级元素，再通过选择器匹配目标元素触发回调，可适配所有静态、动态生成的目标元素。

通用实现（无需确认父容器） #

如果无法确定tel链接的最近公共静态父容器，直接绑定到document即可：

$(function() {
    $(document).on('click', 'a[href^="tel:"]', function(e) {
        e.preventDefault();
    });
})

优化实现（性能更好） #

如果可以确定所有tel链接的最近公共静态父容器，建议将事件绑定到该容器，减少事件冒泡损耗，示例如下（假设搜索结果外层静态容器id为searchPreview）：

$(function() {
    $('#searchPreview').on('click', 'a[href^="tel:"]', function(e) {
        e.preventDefault();
    });
})

内容的提问来源于stack exchange，提问作者SuperDOS