Click handler on element not removed when using .off()

Question

I'm trying to remove a click handler from an a element, but .off() does not remove it. I already looked here and here.

My HTML (which is generated dynamically in document.ready() event):

<ul id="catalog">
<li data-id="2">
    <div class="item">
        <div class="image">
            <a href=""><center><i class="fa fa-picture-o fa-lg noitemimage"></i></center><span class="txt">My title</span></a>
        </div>
        <div class="details"><button class="delete btn-primary-grey-s">Delete</button></div>
    </div>
</li>
</ul>

Javascript:

$(document).on('click', '#catalog a', function () {
    ShowData();
    return false;
});

At a user action the following code is called and I want to remove the click handler that was set in the above code. However, after execution I can still click the hyperlink and the above code is still executed.

$.ajax({
    type: "GET",
    url: "/api/deleteitem/?itemid=" + itemid,
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {

        //disable the events on this elements' "a" click

        //ALL THESE 3 OPTIONS BELOW DO NOT WORK
        //$(document).off('click', 'ul#catalog li[data-id=' + itemid + '] a', '**');
        //$('ul#catalog li[data-id=' + itemid + '] a').off();
        $('ul#catalog li[data-id=' + itemid + '] a').off('click');

    }
});

** UPDATE 1 **

        $.ajax({
            type: "GET",
            url: "/api/getitems/?id=" + id ,
            data: "",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                DYNAMIC HTML CODE GENERATED FROM HERE WORKS DIFFERENTLY??

                }

            }
        });

Answer 1

Your first selector uses event delegation method where the document object contains the registered event handler. When a click happens, it then filters and delegates the event to its children that matches the sub-selector,

'#catalog a'

If you want to remove the event, then you must add click handler directly to the child element as,

$('#catalog a').on('click', function () {
    ShowData();
    return false;
});

(or) you can use off with selector argument as,

$(document).off('click', '#catalog a')

Answer 2

//<a href="javascript:;">

//ShowData logs only first time

var $test = $("#catalog a");

function ShowData() {
    console.log("ShowData");
}

function doNothing() {
  console.log("Off");   
  $test.off("click", ShowData);
}

$test.on("click", doNothing); 
$test.on("click", ShowData);

//For Dynamic

   $("#catalog a").on("click.doNothing", function(){
      console.log("Off");   
      $(this).off("click.ShowData");
   }); 
   $("#catalog a").on("click.ShowData", function(){
     console.log("ShowData");
     //your ajax code
   });

//Update Okay i don't find solve for on/off after ajax success. And also i try $(document).on("click.ShowData", "#catalog a" function(){ etc...

At last this approach work for me.

var i = 0;
function build(){
      var li_builder = '';
      li_builder += '<a href="javascript:;">';
      li_builder += '<span class="txt">' + i + '</span>';
      li_builder += '</a>';
      var attach = $(li_builder).on("click.doNothing", function(){
        console.log("Off");   
        $(this).off("click.ShowData");
      }).on("click.ShowData", function(){
            console.log("showData");
            ajax();
      });
      $('#catalog').append(attach);

      $("#catalog a").each(function(){
      if($(this).parent("li").length > 0){
        console.log("has_li");
      }else{
        console.log("no_li");
        $($(this)).wrap("<li/>");
      }
      });
      i++;
}

function ajax(){
    $.ajax({
            type: "GET",
            url: "",
            data: "",
            success: function (data) {
                build();
            }
        });
}

$(document).ready(function(){
    build();
});