Question

我有一行有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 row 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输入数组的所有元素添加事件并获取输入数组中的所有值？

Answer 1

您可能需要更多类似的内容：

＆＃13;

$(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());
});
  
});

＆＃13;

<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>

＆＃13;

将事件添加到HTML输入数组的所有元素并获取数组

1 个答案: