Question

我有两个带有添加更多按钮的输入字段。如果用户单击“添加”按钮，将显示另外两个具有不同ID名称的输入类型文本。

我在第二个输入字段上使用keyup功能。如果用户输入任何值，它将调用我的ajax函数。

现在我的问题是，动态时如何调用ajax？我的意思是如何将x值发送到ajax？我jusr想了解

$("#total_p_price").keyup(function (){));

如何通过动态呼叫？

检查当我第一次输入数字= 2和total_p_price = 10并进行计算并显示single_price = 5。

这是正确的。现在我点击添加按钮。这次的时间是4，total_p_price = 100，它会进行计算并显示single_price = 50。这也是正确的，但它也更新了第一个single_price字段。

HTML

<div class="add_row">
  <input type="text" name="" id="number">
  <input type="text" name="" id="total_p_price">
  <input type="text" name="" id="single_price">
  <div class="btn_row add_row_click"> <span> +  </span> Add </div>
</div>

<script>
  $(document).ready(function() {
    var max_fields = 20; //maximum input boxes allowed
    var wrapper = $(".add_row"); //Fields wrapper
    var add_button = $(".add_row_click"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment

        $(wrapper).append('<div class="custom_fields"><input type="text" name="" id="number' + x '"><input type="text" name="" id="total_p_price' + x '"><input type="text" name="" id="single_price' + x '"> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
      }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
      e.preventDefault();
      //$(this).parent('custom_fields').remove();
      $(this).closest('.custom_fields').remove();

      x--;
    })
    $("body").on('keyup', 'input[id^=total_p_price]', function() {
      //$('input[id^=single_price]').prop('disabled', true);
      var total_p_price = $(this).val();
      var qty_number = $('input[id^=number]').val();
      $.ajax({
        type: "POST",
        url: baseUrl + "/Customer_control/calculate_total_p_price",
        data: {
          total_p_price: total_p_price,
          qty_number: qty_number
        },
        cache: false,
        success: function(html) {
          //alert(html);
          $('input[id^=single_price]').val(html);
        }
      });
    });
  });
</script>

Answer 1

据我对您的问题的了解，您需要使用事件委托。像

$(".add_row").on("keyup","#total_p_price", function (){
    var  total_p_price= $(this).val();
    $.ajax({
        type  : "POST",
        url: baseUrl + "/Customer_control/calculate_total_p_price",
        data: {total_p_price: total_p_price},
        cache : false,
        success: function(html) {
            console.log(html);

        }
     });
});

您需要确保add_row元素是HTML中的静态元素。

Answer 2

您可以使用input[id^=total_p_price]之类的jquery通配符选择器，并从正文中委派事件

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment

      $(wrapper).append('<div class="custom_fields"><input type="text" name="" class="form_control"><input type="text" class="form_control" id="total_p_price' + x + '" name="" /> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    //$(this).parent('custom_fields').remove();
    $(this).closest('.custom_fields').remove();

    x--;
  })
  $("body").on('keyup', 'input[id^=total_p_price]', function() {
    var total_p_price = $(this).val();
    console.log(total_p_price);
    //ajax here
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_row">
  <input type="text" name="" class="form_control">
  <input type="text" name="" id="total_p_price">
  <div class="btn_row add_row_click"> <span> +  </span> Add </div>
</div>

Answer 3

对于多个选择器，最好使用className而不是id。因为id主要用于单个单个元素选择器。另外，您还将创建动态输入。因此，您可以使用jquery的on()函数

注意

click事件绑定在元素追加之前。因此，您可以使用jquery的on()函数

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment

      $(wrapper).append('<div class="custom_fields"><input type="text" name="" class="form_control"><input type="text" class="form_control total_p_price" id="total_p_price' + x + '" name="" /> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    //$(this).parent('custom_fields').remove();
    $(this).closest('.custom_fields').remove();

    x--;
  })

});
$(document).on('keyup', '.total_p_price', function() {
  var total_p_price = $(this).val();
  //ajax goes here
  console.log(total_p_price)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="add_row">
  <input type="text" name="" class="form_control">
  <input type="text" name="" id="total_p_price">
  <div class="btn_row add_row_click"> <span> +  </span> Add </div>
</div>

id为动态时如何调用ajax

3 个答案: