JQuery UnBind 有效，尝试“重新”绑定绑定不

Question

我正在通过 JQuery 解决方案工作，并且在大多数情况下它都有效，但我被一个我知道我忽略的小细节所困扰。哎呀，也许我的实现/方法需要重新考虑。

这是流程什么有效。
1. 单击添加到表格的锚点。
2. 添加 CSS 类。
3.在preappend()之后禁用（解除绑定）点击。
4.从动态添加记录的表中根据ID删除表。
5.删除步骤2中添加的类。
6. 绑定“点击”

但是，虽然我可以在其上绑定点击和警报。预期的功能不允许我再次执行上述过程。

有问题的代码：

HTML 示例：
启动流程的链接：

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

单击链接

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

JQUERY 和自定义 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 的标签。另一方面，如果您在 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'>    </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);
});