javascript - 在ajax(php)中以数组形式访问id

Question

friend 们。我被一些 javascript 函数困住了，无法将 keyup 函数读取到 id 为数组(qty[])的文本字段。请帮助我

    <table id="dynamic">
    <tr>
    <td>
    <label for="textfield">product :</label>
    </td><td> <select name="product" id="product[0]">
    <?php 
    $result=mysql_query("SELECT * FROM `product`");
    while($row=mysql_fetch_array($result)){
    ?>
    <option value=" <?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
    <?php }?>
    </select>
    <label for="qty">Qty :</label>
    <input type="text" name="qty" id="qty[0]"/>
    <label for="textfield">Price :</label>
    <input type="text" name="price" id="price[0]" readonly/>
    <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
    </td> <div id="loader"></div></tr>
    </table>

javascript

附加动态字段

  <script>
  $(document).ready(function(){
      var i=1;
      $('#add').click(function(){
          $('#dynamic').append('<tr id="row'+i+'"><td><label for="textfield">product :</label></td><td><select name="product" id="product['+i+']"><?php $result=mysql_query("SELECT * FROM `product`");while($row=mysql_fetch_array($result)){?><option value=" <?php echo $row['id']; ?>"><?php echo $row['name']; ?></option><?php }?></select><label for="qty">Qty :</label><input type="text" name="qty" id="qty['+i+']"/><label for="textfield">Price :</label><input type="text" name="price" id="price['+i+']" readonly/></td><td><button type="button" name="remove" class="btn btn-danger btn_remove" id="'+i+'">X</button></td></td><div id="loader"></div></tr>');
      i++;
      });
      $(document).on('click', '.btn_remove', function(){  
         var button_id = $(this).attr("id");   
         $('#row'+button_id+'').remove();  
    });  


  });
  </script>

这里我尝试访问 qty[0] 变量。但它不起作用。当它不是数组时工作正常。

  <script type="text/javascript">
     $(document).ready(function()
     {
         var i=1;
         $("#qty[0]").keyup(function()
         {

               var qty=$("#qty[0]").val();
               var pdt=$("#product[0]").val();
              i++; 

               $.ajax({

                  type:"POST",
                  url:"price_ajax.php",
                  data : { qty : qty, pdt : pdt },

                  beforeSend: function () { 
          $('#loader').html('<img src="loader.gif" alt="" width="24" height="24">');
      },
                  success:function(data)
                  {

                        $("#price[0]").val(data);
                        $("#loader").html("");
                  }
               });
         });

   });

Answer 1

改变

$('#add').click(function() {
  $('#dynamic').append('... id="product['+i+']">...');
  i++;
});

至

$('#add').click(function() {
  $('#dynamic').append('... id="product_'+i+'">...');
  i++;
});

id="product[0]" 将变为 id="product_0"

对其他动态元素应用相同的方法，并在 jQuery 选择器中进行相关修改。 一切都会顺利进行。

此外，我想在此补充一点，请中断您的 append 调用。 Javascript、HTML 和 PHP，一切都发生在一行中。这非常令人困惑。在 javascript 变量中准备 HTML。完成后，将其附加。