javascript - Disabling href on dynamically loading html - Stack Overflow

admin管理员组

文章数量:1321240

I am using this piece of code to disable all links for a preview page:

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

This disables all links that get loaded staticly. However all tags that get loaded using ajax are still pressable.

How do I make it so that all links so even the dynamically loaded ones get disabled in my preview.

I am using this piece of code to disable all links for a preview page:

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

This disables all links that get loaded staticly. However all tags that get loaded using ajax are still pressable.

How do I make it so that all links so even the dynamically loaded ones get disabled in my preview.

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Dec 21, 2016 at 14:57 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Dec 21, 2016 at 14:49 WhoobWhoobWhoobWhoob 8355 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

The element is never the target of mouse events;

You can style the a tags directly:

a {
    pointer-events: none;
}

However, if you don't want to disable all a tags on a page, you should limit it to anchor elements inside of a container:

#container a {
    pointer-events: none;
}

---

Demo

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

#child {
  border: 1px solid black;
}

#container a {
  pointer-events: none;
}

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

Please don't use bind() it was deprecated.

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

You should use event delegation on() when you deal with new elements added dynamically to the DOM :

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

However the css solution posted by @OriDrori looks like the best answer for your case.

Hope this helps.

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

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

本文标签： javascriptDisabling href on dynamically loading htmlStack Overflow