在动态加载html时禁用href

Question

我正在使用这段代码禁用预览页面的所有链接:

var disableLink = function(){ return false;};
$('a').bind('click', disableLink);

这将禁用静态加载的所有链接.但是,使用ajax加载的所有标记仍然是可压缩的.

我该如何制作它以便在我的预览中禁用所有链接,甚至是动态加载的链接.

Answer 1

使用CSS - pointer-events: none.据MDN称:

该元素永远不是鼠标事件的目标;

您可以a直接设置标签样式:

a {
    pointer-events: none;
}

但是,如果您不想禁用a页面上的所有标记,则应将其限制为容器内的锚元素:

#container a {
    pointer-events: none;
}

演示

setTimeout(function() {
  $('#container').append('<a href="http://www.facebook.com">Facebook</a>');
  
    $('#child').append('<a href="http://www.yahoo.com">Yahoo</a>');
}, 1000);

#child {
  border: 1px solid black;
}

#container a {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <a href="http://www.google.com">Google</a>
  
  <div id="child"></div>
</div>