我有一行有 4 个输入:
<div id="productRow1" class="productRow">
<input type="text" name="numbers[]">
<input type="number" name="quantities[]">
<input type="text" name="levels[]">
<input type="number" name="prices[]">
</div>
我有一个“添加另一个产品”按钮，用户可以通过单击该按钮添加另一行。生成的行将如下所示，具有唯一的 div id:
<div id="productRow2" class="productRow">
<input type="text" name="numbers[]">
<input type="number" name="quantities[]">
<input type="text" name="levels[]">
<input type="number" name="prices[]">
</div>
我有一个用于所有行的包装 div，如下所示:
<div class="input_fields_wrap">
<div id="productRow1" class="productRow">...</div>
<div id="productRow2" class="productRow">...</div>
...
</div>
当单击“添加另一个产品”按钮时，如何使用唯一的 div 行 id 动态添加新行:
var wrapper = $(".input_fields_wrap");
$(wrapper).append('<div ' + divId + ' class="productRow"' + '>
<input type="text" name="numbers[]"/>' +
'<input type="number" name="quantities[]"/>' +
'<input type="text" name="levels[]"/>' +
'<input type="number" name="prices[]"/>');
我还有另一个文本框，它应该立即显示总价。因此，我需要在用户输入每行的价格后获取每行的价格数据。我尝试向所有 prices[] 字段添加一个事件，如下所示:
$(function () {
$('input[name="prices[]"]').blur(function () {
alert('testAlert');
});
});
但是没有成功。我还尝试将 onblur 事件添加到现有的和生成的输入字段中，以获取如下价格:
<input type="number" name="prices[]" onblur="calculatePrice()">
具有以下功能:
function calculateTotal() {
alert('testAlert');
var prices = $('input[name="prices[]"]').map(function () {
alert(this.value);
return this.value;
}).get();
}
我还尝试指定如下输入字段:'input[name^="prices"]' 并添加如下事件:
$('input[name="prices[]"]').on('blur', function() {
alert('testAlert');
});
在我将 class='priceClass' 添加到价格输入字段后，按类添加事件:
<input type="number" name="prices[]" class="priceClass">
$('.priceClass').on('blur', function() {
alert('testAlert');
});
这些都没有触发该事件。那么如何向 HTML 输入数组的所有元素添加事件，并在事件触发后获取输入数组中的所有值呢？
最佳答案
您可能需要更多类似的东西:
$(function(){
function getVals(){
var n = 0;
$("input[name='prices[]']").each(function(i, e){
n += +$(e).val();
});
return n;
}
$("input[name='prices[]']").change(function(){
$('#out').html(getVals());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type='number' name='prices[]' value='10' multiple='multiple' />
<input type='number' name='prices[]' value='2' multiple='multiple' />
<input type='number' name='prices[]' value='7' multiple='multiple' />
<input type='number' name='prices[]' value='1' multiple='multiple' />
<div id='out'></div>
</body>
</html>关于javascript - 将事件添加到 HTML 输入数组的所有元素并获取数组中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41134317/