unblind click doesn't work in my case to remove click event

Question

I want to stop the click event from firing but it doesn't work in my case.

html

<div class="owl-controls clickable"><div class="owl-buttons"><div class="owl-prev disabled"><i class="navigator fa fa-caret-left"></i></div><span class="pagi">1/2</span><div class="owl-next"><i class="navigator fa fa-caret-right"></i></div></div></div>

myjs

$(".fa-caret-right").click(function(){
    $(".pagi").text("2\/2");
    $(this).unbind("click");
});

I tried return false it doesn't stop too, maybe because owl-carosel has it click event fired.

Answer 1

if you want it to be clickable only once then go for .one as shown below :-

$(".fa-caret-right").one("click", function(){
    $(".pagi").text("2\/2");

});

Description :

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

Answer 2

you can also use this after on click off the click event

Js Fiddle

$('.fa-caret-right').on('click', function() {
   $(".pagi").text("2\/2");
   $(this).off('click')
});