jquery使用.on來總結一個可重複的列表

Question

我認爲這是一個jQuery的具體問題，但我使用的WordPress的重力形式插件。我有一個列表類型，包含三列和可重複行，類別.add_list_item添加一行，並且.delete_list_item刪除一行。字段代碼是：

<li id='field_21_42' class='gfield conest' > 
    <label class='gfield_label' for='input_21_42'>Three Column List</label> 
    <div class='ginput_container ginput_list'> 
    <table class='gfield_list'> 
     <colgroup><col id='gfield_list_42_col1' class='gfield_list_col_odd'></col><col id='gfield_list_42_col2' class='gfield_list_col_even'></col><col id='gfield_list_42_col3' class='gfield_list_col_odd'></col></colgroup> 
     <thead><tr><th>Option</th><th>Value</th><th>Notes</th><th>&nbsp;</th></tr></thead> 
     <tbody> 
      <tr class='gfield_list_row_odd'> 
      <td class='gfield_list_cell gfield_list_42_cell1'> 
      <select name='input_42[]' tabindex='25' > 
       <option value='' >Select Option</option> 
       <option value='Option 1' >Option 1</option> 
       <option value='Option 2' >Option 2</option> 
       <option value='Option 3' >Option 3</option> 
       <option value='Option 4' >Option 4</option> 
      </select> 
      </td> 
      <td class='gfield_list_cell gfield_list_42_cell2'> 
      <input type='text' name='input_42[]' value='' tabindex='26'/> 
      </td> 
      <td class='gfield_list_cell gfield_list_42_cell3'> 
      <input type='text' name='input_42[]' value='' tabindex='27'/> 
      </td> 
      <td class='gfield_list_icons'> 
      <img src='/wp-content/plugins/gravityforms/images/add.png' class='add_list_item ' title='Add a row' alt='Add a row' onclick='gformAddListItem(this, 0)' style='cursor:pointer; margin:0 3px;' /> 
      <img src='/wp-content/plugins/gravityforms/images/remove.png' title='Remove this row' alt='Remove this row' class='delete_list_item' style='cursor:pointer; visibility:hidden;' onclick='gformDeleteListItem(this, 0)' /> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</li> 

我用一些javascript來填充id = input_21_41的另一個字段。我使用的javascript代碼是：

<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
    var values = $("input[type='text'][name='input_42[]']").change(function() { 
     var sum = 0; 
     values.each(function() { // Step through each one 
     var value = parseInt($(this).val(), 10); // Retrieve its numeric value 
     sum += (isNaN(value) ? 0 : value); // Add to the total 
     }); 
     $('#input_21_41').val(sum); // And show the average 
    }); 
    }); 
</script> 

它很好用，但只將第2列的第一行復制到＃input_21_41中。有人告訴我，我需要使用。對添加/刪除其他值：

$('#input_21_42').on('click', '.add_list_item', function(){ 
    // do stuff here 
}); 

我無法搞清楚如何正確地寫出了這一點，所以我可以考慮添加和刪除，然後總和.onchange。誰能幫我嗎？

Answer 1

我覺得，你在id這個名字中犯了錯字。即id將以field_21_42而不是input_21_42命名。

$('#field_21_42').on('click', '.add_list_item', function(){ ..