动态添加表格行后，jQuery无法正常工作。

Question

动态添加表格行后，jQuery无法正常工作。

javascriptphpjqueryhtml

3

我有以下代码，可以使一个选择列表从一个表格自动填充，另一个选择列表也可以从另一个表格（在同一数据库中）自动填充，而不需要使用提交按钮。所有功能都正常，但是还有一个按钮，如果点击它，将创建另一行具有相同选择字段的表格。

问题是：-代码中有什么问题，因为当我点击添加另一行按钮时，它会显示另一行，但只有第一个选择列表是可操作的。我需要两个选择列表都可以操作； -在克隆行时应该使用什么代替第一个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);
?>

- unknown

addField方法在哪里？ - Sugumar Venkatesan

它在第一个脚本中。 - unknown

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Krzysztof Janiszewski · Accepted Answer

更改这个

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

转换为这样

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

如果您希望事件适用于动态添加的元素，则需要将其绑定到文档而不是元素上。因为jQuery仅将事件绑定到当前在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")也是如此。确保获取到精确的元素。因为现在它将适用于所有具有id="cod_produs"的元素。

所以将其更改为类似于以下内容（示例）：
而不是这样

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

做。

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