Disabling href when dynamically loading html

Question

I use this code snippet to disable all links for the preview page:

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

This disables all links that are loaded statically. However, all tags that are loaded using ajax are still available.

How to make sure that all links, even dynamically loaded ones, are disabled in my preview.

Answer 1

Use CSS pointer-events: none. According to MDN:

An element is never a mouse event object;

You can directly tweak the tags a:

a {
    pointer-events: none;
}

, a , :

#container a {
    pointer-events: none;
}

---

Demo

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>

Hide result

Answer 2

, bind(), .

jQuery 3.0, .bind() . .on() jQuery 1.7, , .

on(), , DOM:

$('body').on('click','a', disableLink);

css, @OriDrori, .

, .

Answer 3

You need to use event delegation. Modify the code to use the event binding method : .on()

  $('body').on('click', 'a', function(){ return false;};);