1

我正在通过一个 JQuery 解决方案工作，并且在大多数情况下它可以工作，但我似乎被一个我知道我忽略的小细节难住了。哎呀，也许我的实现/方法需要重新考虑。

这是有效的流程。
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>
4

1 回答 1

0

我注意到代码存在一些问题。一方面，正如@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);
});
于 2011-01-20T17:48:08.213 回答