How to disable and enable a click event on a table td?

Question

I have a html table. I made one td of this table clickable. If user clicks, it prints something on screen with a time interval. So, this printing takes time. I want to disable my click event during print. After printing finishes, then again click event should be there. Following is my code:

var html = "<table class='analysis_table'>"
    +"<tr>"
        +"<th>Mismatch</th>"
        +"<th>Gap (%)</th>"
    +"</tr>"
    +"<tr>"
        +"<td class='clickMM'>"+mismatch+"</td>"
        +"<td>"+gap+"</td>"
    +"</tr>"
+"</table>";

$("#analysis").html(html);

$(document).on("click", ".clickMM", function () {
    $(this).css("pointer-events", "none");
    show(interval)
        .then(function(result){
            if(result == 'done')
                $(this).css("cursor", "pointer");   
        })
        .catch(function notOk(err) {
            console.error(err)
        })
});
function show(interval) {

    var promise = new Promise(function(resolve, reject) {
        printError();
        for(var i=0;i<(Order.length)-1;i++)
        {   printByTime(interval);//this includes setTimeout function
        }
        resolve("done");
        reject("Error");
    });
    return promise;
}

It stops clicking but not getting on again. What is wrong with this?

Answer 1

As discussed, create a css class

.ClickMe {            
}

Then add the class to the TD column

 <td class="ClickMe">

Then capture the click using the class as a selector and set the pointer events to none.

 $(document).on("click", ".ClickMe", function () {
        alert("click");
        $(this).css("pointer-events", "none");
 });

Clicking again no longer shows the alert. I presume that whatever mechanism you call to print, you could reset the pointer events when it returns.

Thanks

Answer 2

create a function for what you want to happen when you click and bind and unbind that function on click when you need it.

here's a test sample

var tester=function(e){
    e.preventDefault();
    $(".clickMM").css('color','#f00');
    console.log('tester fired');
    //REMOVE CLICK AND DO YOUR TIMED STUFF HERE
    $(".clickMM").unbind("click");
    timer();
}
var timer=function(){
    //DO YOUR TIMED STUFF HERE
    setTimeout(function(){
        $(".clickMM").css('color','#000');
        //ON COMPLETE REBIND USING THIS
        $(".clickMM").bind("click",tester);
    },3000);
}

//ADD THE FUNCTION ON CLICK
$(".clickMM").on("click",tester);

Answer 3

wouldn't this be good enough?

$("#mm").click(function(){
    if($(this).attr("name") == "off"){
        $(this).attr("name","on"); // so nothing happens when the user clicks now
        showMismatch(); //prints something on screen with some time interval
        $(this).attr("name","off");  
}   
});