無法通過ID

Question

擺脫輸入字段的值我表單字段是這樣的：

<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage[]' style='width:40px;' type='text' /> 
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage1" + counter + "' style='width:40px;' type='text' /> 
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage2" + counter + "' style='width:40px;' type='text' /> 
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage3" + counter + "' style='width:40px;' type='text' /> 

域動態添加，我要總結的所有值。

$('[id *= "task_complete_percentage"]').change(function(){    
$('[id *= "task_complete_percentage"]').each(function() { 
console.log('test'); 
    }); 
}); 

但只有第一個字段正在工作，但如果這樣做，我可以看到所有的值。我做錯了什麼？

$("#addElement").click(function(){    
$('[id *= "task_complete_percentage"]').each(function() { 
    console.log('test'); 
}); 
    }); 

Answer 1

似乎沒有被任何需要的ID參數 - 我們可以使用其他參數/​​技術

通過jQuery的解決這些領域

<div id="task_complete_percentage_fields"> 
    <input name='task_complete_percentage[]' value='' class='percent' type='text' /> 
    <input name='task_complete_percentage[]' value='' class='percent' type='text' /> 
    <input name='task_complete_percentage[]' value='' class='percent' type='text' /> 
    <input name='task_complete_percentage[]' value='' class='percent' type='text' /> 
</div> 
<div id="output"></div> 
<div id="addElement">Add another row</div> 

也許使用一些CSS來處理寬度，而不是設置每個樣式的屬性

#task_complete_percentage_fields input.percent { width:40px } 

字段是動態添加的，我想總結所有值。

// Init the Sum Variable 
var percentageSum = 0; 

// Create a Function to Tally the Percentages 
function sumPercentages(){ 
    // Reset the Sum 
    percentageSum = 0; 
    // Loop through the Fields 
    $('#task_complete_percentage_fields input.percent').each(function(k,v){ 
    var $v = $(v); 
    // Strip non-numerals 
    $v.val($v.val().replace(/\D/g , '')); 
    // Sum the Percentages 
    percentageSum += 1*$(v).val(); 
    }); 
    // Output the Sum 
    $('#output').text(percentageSum); 
} 

$(document).ready(function(){ 

    // Attach a delegated live event to the fields within the div 
    $('#task_complete_percentage_fields').on('change' , 'input.percent' , function(){ 
     sumPercentages(); 
    }); 

    // You can also call the same function from any other function 
    $('#addElement').click(function(){ 
     $('#task_complete_percentage_fields') 
     .append("<input name='task_complete_percentage[]' value='' class='percent' type='text' />"); 
     sumPercentages(); 
    }); 

    sumPercentages(); 

}); 

在的jsfiddle檢查了這一點 - http://jsfiddle.net/lucanos/P5f4J/1/

Answer 2

儘量使用像this--

$(".percent").each(function() { 
console.log('test'); 
    });