1

私は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>
4

1 に答える 1

0

コードで気付いた問題がいくつかありました。たとえば、@ RussellUrestiが述べたように、同じIDで2つのタグを作成します。もう1つは、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 に答える