javascript - 动态添加表行后 jquery 不工作

Question

我有以下代码，它使一个选择列表自动从一个表填充，另一个自动从另一个表(都在同一个数据库中)填充，而不使用提交按钮。一切正常，但还有一个按钮，如果单击该按钮，将生成另一个具有相同选择字段的表格行。

问题是:- 代码有什么问题，因为当我单击添加另一行按钮时，它会显示另一行，但只有第一个选择是可操作的。我需要同时选择才能运行； - 使用什么代替第一个 javascript 代码来克隆行但保持完整的功能以下是代码:

新行的 Javascript

<script>
  function addField(n) {
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
  } 
</script> 

脚本查询

<script>
  $(document).ready(function() {

    $("#id_produs").change(function() {
      var id_produs = $(this).val();

      $.ajax({
        url: 'query.php',
        type: 'post',
        data: {
          id_produs: id_produs
        },
        dataType: 'json',
        success: function(response) {

          var len = response.length;

          $("#cod_produs").empty();
          for (var i = 0; i < len; i++) {
            var id_produs = response[i]['id_produs'];
            var cod_produs = response[i]['cod_produs'];

            $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

          }
        }
      });
    });

  }); 
</script>

PHP 和 HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <?php
                    if ($rezultatproduse->num_rows > 0) {
                        while($rowproduse = $rezultatproduse->fetch_assoc()) {
                    ?>
          <option value="<?php echo $rowproduse[" id_denumire "]; ?>">
            <?php echo $rowproduse["denumire"]; ?>
          </option>
          <?php
                        }
                    }
                    ?>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

还有query.php

<?php
include "conn.php";
$id_produs = $_POST['id_produs']; 
$sql = "SELECT id_produs, cod_produs FROM coduri_produse WHERE id_produs = ".$id_produs;
$result = mysqli_query($conn,$sql);
$coduri_arr = array();
while( $row = mysqli_fetch_array($result) ){
    $id_produs = $row['id_produs'];
    $cod_produs = $row['cod_produs'];
    $coduri_arr[] = array("id_produs" => $id_produs, "cod_produs" => $cod_produs);
}
// encoding array to json format
echo json_encode($coduri_arr);
?>

Answer 1

改变这个

$("#id_produs").change(function() {

对此

$(document).on('change', "#id_produs", function() {

如果你想让一个事件作用于动态添加的元素，你需要将它绑定(bind)到文档而不是元素。因为 jQuery 仅将事件绑定(bind)到当前位于 DOM 中的元素。

$(document).on('change', "#id_produs", function() {
  var id_produs = $(this).val();

  $.ajax({
    url: 'query.php',
    type: 'post',
    data: {
      id_produs: id_produs
    },
    dataType: 'json',
    success: function(response) {

      var len = response.length;

      $("#cod_produs").empty();
      for (var i = 0; i < len; i++) {
        var id_produs = response[i]['id_produs'];
        var cod_produs = response[i]['cod_produs'];

        $("#cod_produs").append("<option value='" + id_produs + "'>" + cod_produs + "</option>");

      }
    }
  });
});

function addField(n) {
  var tr = n.parentNode.parentNode.cloneNode(true);
  document.getElementById('tbl').appendChild(tr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>Produse</td>
    <td>Cod Produs</td>
    <td>Cantitate</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <select id="id_produs">
        <option value="0">- Select -</option>
        <option value="test_value">
          test value
        </option>
      </select>
    </td>
    <td>
      <select id="cod_produs">
        <option value="0">- Select -</option>
      </select>
    </td>
    <td>
      <input type="text" name="cantitate" />
    </td>
    <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
  </tr>
</table>

编辑

此外，您还应避免添加具有相同 id 的元素。

这就是为什么激活了错误的select 的原因。将 id 更改为 class，当然在 jQuery 中将 id 更改为 class。

$("#cod_produs") 也是如此。确保您获得了 exzact 元素。因为现在它适用于所有具有 id="cod_produs" 的元素。

所以改成这样(例子):
而不是这个

$("#cod_produs").empty();

做

$(this).closest(".cod_produs").empty();