JQuery UnBind Works、バインドしようとしていません

Question

私はJQueryソリューションの途中で動作していますが、ほとんどの場合動作しますが、私は見た目には細かいところがあります。 、多分私の実装/アプローチを再考する必要があります。

ここではどのような作品の流れだ。
1.テーブルに追加したアンカーをクリックしてください。
2. CSSクラスを追加します。
3.無効化（バインド解除）preappend（）の後にクリックしてください。
4. IDに基づいて動的に追加されたレコード削除テーブルから
5.削除クラス手順2で追加されました。
6.バインド 'クリック'

ただし、私はクリックして警告することはできますが、予想される機能は、上記のプロセスをもう一度進めることができません。

問題のコード：

HTMLサンプル：プロセスを開始
リンク：リンク

<table id="carrier-table"><tbody></tbody></table> 

jQueryとカスタムのクリック後に新しいレコードを保持している

<a href="#" class="view-carrier-scorecard"></a> 
<a href="#" class="view-carrier-trend"></a> 
<a href="#" class="view-carrier-insurance"></a> 
<a href="#" id="17053942" class="add-carrier-company"></a> 

テーブルJavascript関数

<script type="text/javascript" id="removeCarrier"> 
    function removeCarrierFromList(obj) { 
     var i = obj.parentNode.parentNode.rowIndex; 
     document.getElementById('carrier-table').deleteRow(i); 
     $('a#' + obj.id).removeClass('delete-carrier-company'); 
     //alert(obj.id); //.hasClass('add-carrier-company').tostring()); // 

     $('a#' + obj.id).bind('click', function() { 
      //alert('User clicked on ' + obj.id); 
     }); 
    } 
    </script> 



<script type="text/javascript" id="carrierListJS"> 
    $(function() { 

     // Link 
     // This adds a carrier to a list 
     $('.add-carrier-company').click(
     function() { 

     var target = $(this).attr("id"); 
     alert(target); 
     $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + 
     "<td><a href='#' id='" + target + "' class='delete' onclick='removeCarrierFromList(this)'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" + 
     "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + 
     "</tr>"); 

     return false; 
     }); 

     $('.add-carrier-company').click(
     function() { $(this).addClass('delete-carrier-company').unbind('click'); } 
    ); 

    }); 
    </script> 

Answer 1

コードに気づいたいくつかの問題がありました。一つは、@ RussellUrestiが述べたように、同じIDを持つ2つのタグを作成します。別のこととして、jQueryのセレクタでIDを使用している場合は、ID名を使用しないでください（つまり、$('#id')ではなく$('a#id')を使用します）。 。

ご質問にお答えするjsfiddleを作成しましたが（大部分を書き換えましたが）、 :)私はそれがあなたが探しているものだと思います。
テストHTML

<a href="#" class="view-carrier-scorecard">aa</a> 
<a href="#" class="view-carrier-trend">bb</a> 
<a href="#" class="view-carrier-insurance">cc</a> 
<a href="#" id="10002" class="add-carrier-company">10002</a> 
<a href="#" id="10003" class="add-carrier-company">10003</a> 

<table id="carrier-table" style="border:1px solid #000"><tbody></tbody></table> 

はJavaScript

function addCarrier() { 
    var target = $(this).attr("id"); 
    $("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + "<td><a href='#' id='a" + target + "' class='delete'>&nbsp;&nbsp;&nbsp;&nbsp;</a></td>" + "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + "</tr>"); 
    $('#a' + target).click(removeCarrierFromList); 
    $(this).addClass('delete-carrier-company').unbind('click'); 
    return false; 
} 

function removeCarrierFromList() { 
    var $this = $(this); 
    var id = $this.attr('id').replace("a",""); 
    $this.closest('tr').remove(); 
    $('#' + id).removeClass('delete-carrier-company').click(addCarrier); 
} 

$(function() { 

    // Link 
    // This adds a carrier to a list 
    $('.add-carrier-company').click(addCarrier); 
});