javascript - JQuery UnBind 有效，尝试 "re"绑定(bind)无效

Question

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

这是有效的流程。
1. 单击添加到表格的 anchor 。
2. 添加 CSS 类。
3. 禁用(取消绑定(bind))preappend()后的点击。
4、从动态添加记录的表中根据ID删除表。
5.删除步骤2中添加的类。
6.绑定(bind)‘点击’

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

有问题的代码:

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