CODEWITHSUNDEEP
javascriptjqueryhtml
T.Steur
T.Steur

Reputation: 7

unbind a click function after use

i a making a tic-tac-toe game and i now want to know how i can make a button unclickable after a click. here is the game field:

<div id="gamefield">
    <table border="0">
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
    </table>
</div>

this is the randomstart function:

var randomStart = Math.floor(Math.random() * 2);

this is the function for the gamefield:

$("#gamefieldtr td").click(function() {
    if ($(".game-button").html() == "Start spel") {
        alert("you can't start");
    } else {
        if(randomStart == 0){
            var val = $(this).children().attr('src', 'img/cross.jpg');
            randomStart = 1;
            $("#playerTurn").html("1");
            $("#turnImg").attr("src", "img/circle.jpg");
        }
        else {
            var val = $(this).children().attr('src', 'img/circle.jpg');
            randomStart = 0;
            $("#playerTurn").html("0");
            $("#turnImg").attr("src", "img/cross.jpg");
            $('src', 'img/circle.jpg').unbind("click");
        }
    }
});

Upvotes: 0

Views: 2276

Answers (2)

motanelu
motanelu

Reputation: 4025

Just use jquery's one() instead of click() to add the event handlers:

.one( events [, data ], handler ) Returns: jQuery

Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

version added: 1.1.one( events [, data ], handler )

Here's how the code should look like:

$('#gamefieldtr td').one('click', function (event) {
  // your logic here
})

Handlers added with one() are automatically removed once they've been triggered, so you don't have to do it yourself.

Upvotes: 7

Dipiks
Dipiks

Reputation: 3928

If you want to unbind an event there is the function .off() in jquery

.off()

.off( events [, selector ] [, handler ] )

Description: Remove an event handler.

$("#gamefieldtr td").click(function() {

    // PUT THE LINE BELOW WHERE YOU WANT TO UNBIND YOUR CLICK EVENT OF YOUR TR
    $("td").off("click", "#gamefieldtr");

    if ($(".game-button").html() == "Start spel") {
        alert("you can't start");
    } else {
        if(randomStart == 0){
            var val = $(this).children().attr('src', 'img/cross.jpg');
            randomStart = 1;
            $("#playerTurn").html("1");
            $("#turnImg").attr("src", "img/circle.jpg");
        }
        else {
            var val = $(this).children().attr('src', 'img/circle.jpg');
            randomStart = 0;
            $("#playerTurn").html("0");
            $("#turnImg").attr("src", "img/cross.jpg");
            $('src', 'img/circle.jpg').unbind("click");
        }
    }
});

Upvotes: 0

Related Questions