选择在jQuery中动态创建的ID

Question

我写了下面的jQuery代码，当我单击#addbtn 2文本框并在下面的代码中创建此代码时

var i = 2;
/* button  #add_btn */
$(document).on("click", "#add_btn", function(evt) {
  $('.add_checkbox').append("<input type='checkbox' id=foodcheckbox_" + i + " style='margin-bottom:20px;'><br/>");

  $(".add_food").append("<input class='wide-control form-control default input-sm foodha' type='text' placeholder='Food' id=food_input" + i + " style='margin-bottom:5px;'>");

  $(".add_price").append("<input class='wide-control form-control default input-sm priceha' type='text' placeholder='Price' id='price_input" + i + "' style='margin-bottom:5px;'>");
  i++;
});

这段代码可以正常工作，但是当我想选择与上面的代码一起添加的文本框以获取它们的内容时，按id进行的选择器不起作用，下面是我用来获取这些文本的值的代码-盒子：

/* button  Submit */
$(document).on("click", ".uib_w_60", function(evt) {
  var foodid = [];
  var priceid = [];
  /* your code goes here */
  /* first I get id of .foodha class */
  $(".foodha").each(function() {
    var IDss = $(this).prop("id");
    foodid.push(IDss);

  });
  /*  second I get id of .priceha class */
  $(".priceha").each(function() {
    var pID = $(this).prop("id");
    priceid.push(pID);

  });

  var newfoodpriceid = [];
  /* here I dont know why the Id that gotten save
  twice in array, for example save with this pattern 
  [food_input2, food_input3, food_input2, food_input3]
  and to prevent this I use a trick and save it in another
  array with the code below: */

  for (var c = 0; c < priceid.length / 2; c++) {
    newfoodpriceid.push({
      'foodid': foodid[c],
      'priceid': priceid[c]
    });

  }

  /* then I want to get value of text box with exact
     id that I select with jQuery selector but the
     selector isn't working and the returned value
     is nothing but I enter a value in text box that
     have below id: */
  var pr = $("#" + newfoodpriceid[0].priceid).val();
  $("p").text(pr);
});

我会解释我认为您需要了解的所有事情。

在单击addbtn添加文本框之前的HTML代码：

<div class="grid grid-pad urow uib_row_42 row-height-42" data-uib="layout/row" data-ver="0">
  <div class="col uib_col_46 col-0_1-12_1-7" data-uib="layout/col" data-ver="0">
    <div class="widget-container content-area vertical-col center">
      <div class="add_checkbox" style="margin-top:5px"></div>
      <span class="uib_shim"></span>
    </div>
  </div>
  <div class="col uib_col_48 col-0_6-12_6-7" data-uib="layout/col" data-ver="0">
    <div class="widget-container content-area vertical-col">
      <div class="add_food"></div>
      <span class="uib_shim"></span>
    </div>
  </div>
  <div class="col uib_col_47 col-0_5-12_5-5" data-uib="layout/col" data-ver="0">
    <div class="widget-container content-area vertical-col">

      <div class="add_price"></div>
      <span class="uib_shim"></span>
    </div>
  </div>

  <span class="uib_shim"></span>
</div>

然后单击两次“添加btn”后的HTML代码

<div class="add_food">
  <input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input2" style="margin-bottom:5px;">
  <input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input3" style="margin-bottom:5px;">
</div>

<div class="add_price">
  <input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input2" style="margin-bottom:5px;">
  <input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input3" style="margin-bottom:5px;">
</div>

如您所见，带有我想要的ID的文本框可以很好地生成，但是我无法使用其ID来选择它。

Answer 1

我在您的代码中看到的唯一问题是，一旦页面运行，您必须从jquery重新调用“ each”函数。 执行此“循环”时，不存在“ foodha”或“ priceha”类共铸元素。 你可以把

  $(".foodha").each(function() {
    var IDss = $(this).prop("id");
    foodid.push(IDss);

  });

在睡眠循环或稍后将调用的js函数中。

setTimeout(function(){
  $(".foodha").each(function() {
    var IDss = $(this).prop("id");
    foodid.push(IDss);

  });
},1000); //for a second delay

要么

function call_after_creating(){
   $(".foodha").each(function() {
      var IDss = $(this).prop("id");
      foodid.push(IDss);
   });
}