Find all links in the div element and disable them all

Question

Suppose I have some HTML elements like these:

<div id="content_div"> <span><a href="some_link">Click me</a></span> <div> Hello everybody. Click <a href="some_link_else">me</a> to do something else</div> <a href="3rd_link"> Oops </a> </div> 

All I need to do is get all the # # tags in #content_div and disable them all (I don’t want the user to click on them). How can I do this in jQuery?

Answer 1

Try the following:

  $("#content_div a").click(function(e) { e.preventDefault(); }); 

Answer 2

I would expect less on jQuery since it can be disabled by the user, so if you want to use a CSS solution, you can do it like

 #content_div { pointer-events: none; cursor: default; } 

Demo

Edit: To be precise, use this declaration #content_div a

Answer 3

 $("#content_div a").css({"color":"#888888", cursor: "default"}).click(function(e){ e.preventDefault(); }); 

Working example http://jsfiddle.net/P4Fqq/

Answer 4

There are two ways:

1) $('#content a').css({"pointer-events":"none"});

2) $('#content a').click(function(e){ e.preventDefault(); });