Question

我正在通过一个JQuery解决方案工作，并且大多数情况下它都可以工作，但我很难看到我知道我忽视的一个小细节。哎呀，也许我的实现/方法需要重新考虑。< / p>

这是有效的流程 1.单击添加到表格的锚点 2.添加CSS类 3.在preappend（）之后禁用（取消绑定）单击 4.从动态添加记录表中删除基于ID的表 5.删除在步骤2中添加的类。
6.绑定'click'

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

有问题的代码：

HTML SAMPLE：
启动流程的链接：

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

JQuery UnBind Works，尝试“重新”绑定不会

1 个答案: