Question

这里我需要获取输入字段中输入的所有值。但它只回应了第一个值。

即。当我按下+并给出一些值时，我也需要获得该值。

＆＃13;

$(document).ready(function() {
  $(document).on("click", ".add", function() {
    var clone = '<div class="add1"><input type="text" name="selprice" /><input type = "submit"    value = "+"    class = "add" ><input type = "submit"    value = "-"    class = "remove" ></div>';
    $(this).closest('.add1').after(clone);
  });
  $(document).on("click", ".remove", function() {
    $(this).parent(".add1").remove();
  });

});
$('#package').change(function() {
  var arr = [];
  $("input.packageclass").each(function() {
    arr.push($(this).val());
    alert(arr);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
  <h6>Sales Package </h6>
  <div>
    <input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
    <input type="submit" value="+" class="add"></div>
</div>

＆＃13;

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
    <h6>Sales Package </h6>
    <div>
        <input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
        <input type="submit" value="+" class="add">
    </div>
</div>
<script type="text/javascript">
var addInput = function(e) {
    var arr = [];
    $("input.packageclass").each(function() {
        arr.push($(this).val());
    });
    alert(arr);
};
$(document).ready(function() {
    $(document).on("click", ".add", function() {
        var clone = '<div class="add1"><input class="packageclass" type="text" name="selprice" /><input type = "submit"    value = "+"    class = "add" ><input type = "submit"    value = "-"    class = "remove" ></div>';
        $(this).closest('.add1').after(clone);
        $('.packageclass').unbind().bind('change', addInput);
    });
    $(document).on("click", ".remove", function() {
        $(this).parent(".add1").remove();
    });

});
$('.packageclass').unbind().bind('change', addInput);
</script>

Answer 2

$('.package').change(function() {

您在input type="text"中使用了ID。 ID仅使用一次。如果要将侦听器添加到所有文本字段，请使用类。除此之外，只有一次调用.change(function()，当dom准备就绪时。这也是一个问题。因此，更改侦听器不会添加到生成的文本字段中。也许你使用类似......的东西。

$('.package').on('change', 'input', function() {

});

Answer 3

只需使用循环，您就可以从循环中获取特定值。

for (var i = arr.length - 1; i >= 0; i--) {
    arr[i];
   //work with arr[]
}

Answer 4

我使用event delegation捕获事件并采取适当的措施。

在此，您可以向parent element添加事件监听器，例如click到.body。当我单击.add按钮时，事件将传播并调用.body单击处理程序。通过检查event.target，我们可以找到事件的来源以及add或remove div。

类似地，我们可以听取输入框的change事件并采取适当的行动。

$('#body').click(function(e) {
  if(e.target.className === 'add') {
    $('#body').append(`
      <div class="add1">
      <input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
      <button class="add">+</button>
      <button class="remove">-</button>
    </div>
    `);
  }
  
  if(e.target.className === 'remove') {
    $(e.target).parent().empty();
  }
  
});

$('#body').change(function(e) {
  console.log(e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="body">
  <h6>Sales Package </h6>
  <div class="add1">
    <input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
    <button class="add">+</button>
  </div>
</div>

Answer 5

创建克隆变量时，只需将 class =“packageclass”添加到输入中。

https://jsfiddle.net/289xvmu7/

var clone = '<div class="add1"><input type="text" name="selprice" class="packageclass"/> <input type = "submit"    value = "+"    class = "add" ><input type = "submit"    value = "-"    class = "remove" ></div>';

如何使用jquery显示单个字段的值数组？

5 个答案: