Question

我是javascript的新手。我想克隆一行，但我无法复制我在列中的onChange事件中的函数。

代码段

<table name="tagihan" class="table table-striped">
    <thead>
    <tr>
    <th><b>Nomor Tagihan</b></th>
    <th><b>Tanggal</b></th>
    <th><b>Unit</b></th>
    <th><b>Jenis Layanan</b></th>
    <th><b>Keterangan</b></th>
    <th colspan="2"><b>Total (Rp)</b></th>
    <th><b>Tambah</b></th>
    </tr>
    </thead>

    <tbody id="tagihan">
        <tr id="detail_tagihan">
        <td></td>
        <td><?php if (isset($tgl_masuk)){ echo $tgl_masuk;} else { echo "Data tidak ditemukan"; } ?></td>
        <td>
        <select id="unit" class="selectpicker show-tick form-control" data-live-search="true" onchange="filterUnit();" >
          <option value="Umum">Umum</option>
          <option value="Surgery">Surgery</option>
          <option value="Grooming">Grooming</option>
        </select>
        </td>
        <td>
<select id="layanan" class="selectpicker show-tick form-control" data-live-search="true" disabled>
        <option data-unit="Umum" value="Pendaftaran">Pendaftaran</option>
        <option data-unit="Umum" value="Pemeriksaan">Pemeriksaan</option>

        <option data-unit="Surgery" value="Scalling">Scalling</option>
        <option data-unit="Surgery" value="Castrasi">Castrasi</option>

        <option data-unit="Grooming" value="Mandi Kutu">Mandi Kutu</option>
        <option data-unit="Grooming" value="Mandi Jamur">Mandi Jamur</option>
</select>
    <span id="option-container" style="visibility: hidden; position:absolute;"></span>
    <script>
        function filterUnit(){
            var unit = $("#unit").find('option:selected').text(); 
            $("#option-container").children().appendTo("#layanan");
            var toMove = $("#layanan").children("[data-unit!='"+unit+"']");
            toMove.appendTo("#option-container"); 
            $("#layanan").removeAttr("disabled"); 
            };
    </script>
    </td>

    <td>
    <input type="text" id="Keterangan" class="form-control" placeholder="Keterangan">
    </td>

    <td>
    <input type="text" id="Harga" class="form-control" placeholder="Harga">
    </td>
    <td>
    <button type="button" class="btn btn-default" onclick="addRow()" id="tambah">Tambah</button>
    <script>                        
        function addRow(){
            var row = document.getElementById('detail_tagihan');         
            var tr = row.cloneNode(row); 
            document.getElementById('tagihan').appendChild(tr); 
                                    } 
    </script>
    </td>
    </tr>
    </tbody>
    </table>

在我的情况下，新添加的行filterUnit()函数不起作用。如何使addRow()函数也克隆该事件？

谢谢。

Answer 1

您可以使用jquery live功能。

以下是示例：

$( "select#unit" ).live( "change", function() {
  //put your filterUnit function code here // jQuery 1.3+
});
$( document ).delegate( ""select#unit"", "change", function() {
  //put your filterUnit function code here // jQuery 1.4.3+
});
$( document ).on( "change", ""select#unit"", function() {
  //put your filterUnit function code here // jQuery 1.7+
});

这是一个完整的文件：

<!DOCTYPE html>
<html>
<head>
    <!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

     var cloned = $("#tagihan").html();

    $( document ).on( "click", ".tambah", function() {
         console.log(cloned);
        // $('#aaa').append(cloned);
     $("#tagihan").append(cloned);
    // console.log(111);
     //put your filterUnit function code here // jQuery 1.3+
   });
    var unit ;
    var toMove 
   $( document ).on( "change", ".unit", function(e) {

           //unit = $(this).closest('tr.detail_tagihan').("#unit").text(); 
           unit =  $(this).closest("tr").find(".unit").val();

             $(this).closest("tr").find(".option-container").children().appendTo(".layanan");

             toMove =  $(this).closest("tr").find(".layanan").children("[data-unit!='"+unit+"']");
             toMove.appendTo(".option-container"); 
            $(this).closest("tr").find(".layanan").removeAttr("disabled"); 

   });

});
</script>
</head>
<body>
<div id="aaa" > </div>
<table name="tagihan" class="table table-striped">
    <thead>
    <tr>
    <th><b>Nomor Tagihan</b></th>
    <th><b>Tanggal</b></th>
    <th><b>Unit</b></th>
    <th><b>Jenis Layanan</b></th>
    <th><b>Keterangan</b></th>
    <th colspan="2"><b>Total (Rp)</b></th>
    <th><b>Tambah</b></th>
    </tr>
    </thead>

    <tbody id="tagihan">

        <tr id="detail_tagihan" class="detail_tagihan">
        <td> - </td>
        <td> -  </td>
        <td>
        <select id="unit" class=" unit selectpicker show-tick form-control" data-live-search="true" >
          <option value="Umum">Umum</option>
          <option value="Surgery">Surgery</option>
          <option value="Grooming">Grooming</option>
        </select>
        </td>
        <td>
<select id="layanan" class=" layanan selectpicker show-tick form-control" data-live-search="true" disabled>
        <option data-unit="Umum" value="Pendaftaran">Pendaftaran</option>
        <option data-unit="Umum" value="Pemeriksaan">Pemeriksaan</option>

        <option data-unit="Surgery" value="Scalling">Scalling</option>
        <option data-unit="Surgery" value="Castrasi">Castrasi</option>

        <option data-unit="Grooming" value="Mandi Kutu">Mandi Kutu</option>
        <option data-unit="Grooming" value="Mandi Jamur">Mandi Jamur</option>
</select>
    <span id="option-container" class = "option-container" style="visibility: hidden; position:absolute;"></span>

    </td>

    <td>
    <input type="text" id="Keterangan" class=" Keterangan form-control" placeholder="Keterangan">
    </td>

    <td>
    <input type="text" id="Harga" class="Harga form-control" placeholder="Harga">
    </td>
    <td>
    <button type="button" class="btn btn-default tambah" >Tambah</button>

    </td>
    </tr>
    </tbody>
    </table>



</body>
</html>

克隆行及其事件javascript

1 个答案: