时间戳

首页 > 解决方案 > 动态添加表行后jquery不起作用

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

问题描述

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

问题是： - 代码有什么问题，因为当我单击添加另一行按钮时，它会显示另一行，但只有第一个选择是可操作的。我需要两个都选择才能运行；- 使用什么而不是第一个 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);
?>

标签： javascriptphpjqueryhtml

解决方案

改变这个

$("#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")。确保您获得了 exzact 元素。因为现在它适用于所有带有id="cod_produs".

所以改变成这样的东西（例子）：
而不是这个

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

做

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

推荐阅读