The main problem here is that this
inside the ajax function is not the same as this
outside the function. The scope is different ... This has an easy solution, which is to create an intermediate variable that points to the same object:
$("#meuBotao").click(function (e) {
$(this).off("click");
var self = this; // assim guardamos o apontador no "self"
$.ajax({
url: "/page",
type: "POST",
complete: function() {
$(self).on("click"); // aqui usa o "self". Já agora, aqui falta a função a correr quando o click fôr gerado
},
...
Apart from this detail there are other ways more used to prevent clicks, instead of removing and adding events. One of them is to create a flag / flag as a property in the element or a variable that holds the information whether or not the element can be clicked.
An example of this would be:
$("#meuBotao").click(function (e) {
if (!$(this).data('clicavel')) return false;
$(this).data('clicavel', false);
var self = this; // assim guardamos o apontador no "self"
$.ajax({
url: "/page",
type: "POST",
complete: function() {
$(self).data('clicavel', true);
},
...
You can even do the same by adding CSS pointer-events: none;
to a class, or directly to the element. You can see more ideas in this answer: link
Note: In your code $(this).on("click");
is missing the second parameter of the function that indicates which code to run when the click is received ...