HTML5: how do I disable all links after any one of them are clicked?

Question

This is what my current link looks like:

<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="square"> <span class="ttt_square"> &nbsp; </span> </a>

I know it's not ajax because the jQuery ajax:success type events are never invoked.

This is teh site that I'm working on: http://ttt-ai.heroku.com/

Answer 1

If you want to disable all links on a page you can use this:

$("a").live('click', function(e) {
    e.preventDefault;
    return false;
});

Or you can target specific links like this:

$("a.disabledLink").live('click', function(e) {
    e.preventDefault;
    return false;
});

<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="disabledLink">
    <span class="ttt_square">&nbsp;</span>
</a>

Answer 2

Try this,

<script type="text/javascript">
    $(function() {
        $('a').click(function() {
           $(this).attr('href', 'javascript:void(0);');
        });
    });
</script>

And if you will add a class to your link for being more specific; let's say

<a class="disableAfterClick" href="/board/take_turn?id=313&x=1&y=2" data-remote="true"> <span class="ttt_square"> &nbsp; </span> </a>

than

<script type="text/javascript">
    $(function() {
        $('a.disableAfterClick').click(function() {
           $(this).attr('href', 'javascript:void(0);');
        });
    });
</script>

Answer 3

var $a = $("a");

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

no need to traverse twice, or if you do

$("a").live("click", function() {
     $("a").click(function(e) {
         e.preventDefault();
     }
});

Answer 4

You can use e.preventDefault() .