のクリックハンドラ.off（）を使用しているときに要素が削除されない

Question

a要素からクリックハンドラを削除しようとしていますが、.off()は削除しません。 私は既にhereとhereを見ました。

（document.ready()イベントに動的に生成される）私のHTML：

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

と私はそれをクリックハンドラーを削除したいです上記のコードで設定されています。しかし、実行後、私はまだハイパーリンクをクリックすることができ、上記のコードはまだ実行されます。

$.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

あなたの最初のセレクタはdocumentオブジェクトは、登録済みのイベントハンドラを含むイベント委譲メソッドを使用しています。クリックが発生した場合、それはその後、サブセレクタに一致する子にイベントをフィルタリングし、代表者、

'#catalog a' 

あなたがイベントを削除したい場合は、として直接の子要素にクリックハンドラを追加する必要があり、あなたにselector引数でoffを使用することができます

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

（または）、

$(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 
    }); 

//更新 Ajaxが成功した後、私はon/offの解答が見つかりません。そしてまた、私は$（文書）.on（ "click.ShowData"、で最後の私にとっては、このアプローチの仕事を関数（）{...など

"#catalog" を試してみてください。

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