unbind a click function after use

Question

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");
        }
    }
});

Possible duplicate of [Best way to remove an event handler in jQuery?](http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery) — ppasler, Jan 17 '17 at 12:10
Mark the button as clicked with a class and return false on the event handler when the button has said class? — tmslnz, Jan 17 '17 at 12:11

motanelu · Accepted Answer · 2017-01-17T12:21:24.317

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.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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");
        }
    }
});

unbind a click function after use

2 Answers2