JQuery //削除後IDイベントトリガーなし

私はセル数量を持つデータグリッドを持ち、別の価格は結果を示すラベル（価格* qty）を末尾に付けます。それは完全に仕事です。しかし、私は行を削除することもできますし、それは動作を停止します。 JQuery //削除後IDイベントトリガーなし

その後削除（あなたが価格* 数量の結果が表示されます）

は、各列に数値を入力します。
この
は、問題を再現するために私のコード

http://jsfiddle.net/bizonbytes/SYwpy/24/

です行2
今すぐ行1に行き、の値を変更すると、結果を確認しますが、行3で実行すると、が実行されません。

なぜ私は3行目が機能しなくなったのですか。

Iは1と2にIDの名前を変更する必要があるビジネスREQとして

とHTMLは1と3

にそれらを残していない：

<div class="row_table row_service_table" id="service_row_1"> 
    <div class="cell celldata cell_service_data"><input type="text" class="quantity_row" id="quantity_row_1" rel="1"/></div> 
    <div class="cell celldata cell_service_data"><input type="text" class="price_row" id="price_row_1" rel="1"/></div> 
    <div class="cell celldata cell_service_data"><a href="javascript:void(0)" class="delete_service_row" id="delete_service_row_1" rel="1">Delete row 1</a></div> 
    <div class="cell celldata cell_service_data">Result row 1=<span id="total_1"></span></div> 
</div> 

etc.

Javascriptを：

$(".delete_service_row").click(function(){ 
    var rowId = $(this).attr('rel'); 

    $('#service_row_' + rowId).remove(); 

    // iterates through each of the elements matched by the selector 
    $('.row_service_table').each(
     // i represents the index of each of the elements 
     function(i){ 
       // sets the id of each of the returned elements 
       // to the string concatenated with the expression 'i + 1' 
      this.id = 'service_row_' + (i+1); 

      $(this).children('.cell_service_data').children('.quantity_row').attr('id', 'quantity_row_' + (i+1)); 
      $(this).children('.cell_service_data').children('.quantity_row').attr('rel', (i+1)); 
      $(this).children('.cell_service_data').children('.quantity_row').attr('name', 'quantity_row_' + (i+1)); 

      $(this).children('.cell_service_data').children('.price_row').attr('id', 'price_row_' + (i+1)); 
      $(this).children('.cell_service_data').children('.price_row').attr('rel', (i+1)); 
      $(this).children('.cell_service_data').children('.price_row').attr('name', 'price_row_' + (i+1)); 
     }); 
}); 

$('.quantity_row,.price_row').live('change', function(){ 
    var rowId = $(this).attr('rel'); 

    // Lets update the total line 
    var total = parseFloat($('#quantity_row_' + rowId).val()) * parseInt($('#price_row_' + rowId).val()); 
    $('#total_' + rowId).text(total); 
});

出典

2011-07-21 Yannick

リンクは優れていますが、[関連するコードを質問に含めてください]（http://stackoverflow.com/questions/how-to-ask）も常に覚えておく必要があります。（私はあなたのためにこれをやった。） –

2入力のうちidとrelが再マッピングされますが、結果の範囲のidはそのままです！（含まれているテキストも変更されていませんdiv）

です。

変化があった：

結果行に<span class="rezLabel">を添加し、結果値がrezValueのクラスにまたがる与えました。

はにリナンバリングコードを変更：

$('.row_service_table').each (
    // i represents the index of each of the elements 
    function(i){ 
      // sets the id of each of the returned elements 
      // to the string concatenated with the expression 'i + 1' 
     this.id   = 'service_row_' + (i+1); 
     var baseNode = $(this).children('.cell_service_data'); 

     baseNode.children('.quantity_row').attr('id', 'quantity_row_' + (i+1)); 
     baseNode.children('.quantity_row').attr('rel', (i+1)); 
     baseNode.children('.quantity_row').attr('name', 'quantity_row_' + (i+1)); 

     baseNode.children('.price_row').attr('id', 'price_row_' + (i+1)); 
     baseNode.children('.price_row').attr('rel', (i+1)); 
     baseNode.children('.price_row').attr('name', 'price_row_' + (i+1)); 

     baseNode.children('a').text('Delete row ' + (i+1)); 
     baseNode.children('a').attr('id', 'delete_service_row_' + (i+1)); 
     baseNode.children('a').attr('rel', (i+1)); 

     baseNode.children('.rezLabel').text('Result Row ' + (i+1) + ' = '); 
     baseNode.children('.rezValue').attr('id', 'total_' + (i+1)); 
});

出典

2011-07-21 02:01:17

ようこそ。喜んで助けてください。 –