クローン化された各フォームに同じ機能を使用する方法

Question

私は新しいフォームにクローンすることができるフォームを持っており、各フォームでクローンできる表があります。

これは、これは私のスクリプトである私のフォーム

<div class="box box-body form_pengeluaran"> 
    <section class="content-header"> 
    <h3>Pengeluaran</h3> 
    <button type="button" class="btn btn-success tambah_form_pengeluaran">Tambah Pengeluaran</button> 
    </section> 
    <br> 
    <div class="col-md-12"> 
    <div class="form-group"> 
     <label>Tanggal Pengeluaran</label> 
     <input type="text" name="tgl_pengeluaran" id="tgl_pengeluaran" class="form-control" required> 
    </div> 
    <div class="form-group"> 
     <label>Nama Toko</label> 
     <input type="text" name="nama_toko" id="nama_toko" class="form-control" required> 
    </div> 
    <div class="form-group"> 
     <label>Metode Pembayaran</label> 
     <select class="form-control" name="metode_pembayaran" id="metode_pembayaran" style="width: 100%;" required> 
     <option selected disabled>-- Pilih Metode Pembayaran --</option> 
     <option>Debit</option> 
     <option>Kredit</option> 
     </select> 
    </div> 
    <br> 
    <div class="form-group table-responsive table_barang"> 
     <table class="table table-bordered"> 
     <thead> 
      <tr> 
      <th>Jumlah Barang</th> 
      <th>Nama Barang</th> 
      <th>Harga Barang</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td><input type="text" name="jlh_barang" id="jlh_barang" class="form-control"></td> 
      <td><input type="text" name="nama_barang" id="nama_barang" class="form-control"></td> 
      <td><input type="text" name="jlh_harga" id="jlh_harga" class="form-control"></td> 
      <td><button type="button" class="btn btn-success glyphicon glyphicon-plus tambah_barang"></button></td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    <div class="form-group total_harga"> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th>Total Harga Barang</th> 
      <td><input type="text" name="jlh_semua_harga" id="jlh_semua_harga" class="form-control" readonly></td> 
      </tr> 
     </thead> 
     </table> 
    </div> 
    </div> 
    <div class="col-md-12"> 
    <hr> 
    </div> 
</div> 

私は、フォームのクローンを作成する場合、それは動作しますが、私は、各フォームにテーブルのクローンを作成する場合、それは動作しません。..

です：

$(document).ready(function() { 
var clone_form_pengeluaran = $("div.form_pengeluaran").clone(true); 
    $(document).on('click', '.tambah_form_pengeluaran', function(e){ 
    var parent = jQuery('div.form_pengeluaran').last(); 
    clone_form_pengeluaran.clone(true).insertAfter(parent); 
    $('div.form_pengeluaran:not(:last) .tambah_form_pengeluaran') 
     .removeClass('tambah_form_pengeluaran').addClass('hapus_form_pengeluaran') 
     .removeClass('btn-success').addClass('btn-danger') 
     .html('Hapus Pengeluaran'); 
    }).on('click', '.hapus_form_pengeluaran', function(e) 
     { 
    $(this).parents('div.form_pengeluaran:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 

    var clone_table_barang = $('div.table_barang table tbody tr').clone(true); 
    $(document).on('click', '.tambah_barang', function(e){ 
    var parent = jQuery('div.table_barang table tbody tr').last(); 
    clone_table_barang.clone(true).insertAfter(parent); 
    $('div.table_barang table tbody tr:not(:last) .tambah_barang') 
     .removeClass('tambah_barang').addClass('hapus_barang') 
     .removeClass('btn-success').addClass('btn-danger') 
     .removeClass('glyphicon-plus').addClass('glyphicon-minus'); 
    }).on('click', '.hapus_barang', function(e) 
     { 
    $(this).parents('div.table_barang table tbody tr:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
}); 

これは、あなたが簡単に書くことができFiddle

Answer 1

あるjQuery pluginは私の下に掲載されたようです。コードは自己文書化されています。

HTML

<table id="table1"> 
    <tr> 
    <td><input type=text value=""></td> 
    <td><button data-row-action="add">add</button></td> 
    </tr> 
</table> 

<table id="table2"> 
    <tr> 
    <td><input type=text value=""></td> 
    <td><button data-row-action="add">add</button></td> 
    </tr> 
</table> 

JS

$.fn.myTablePlugin = function() { 
    if(!$(this).is('table')) { alert('Plugin can be called only on table tag !!!'); } 

    let _self = $(this); // table tag which plugin is called on 

    // add listener for adding row 
    _self.find('*[data-row-action="add"]').on('click', function() { 
    let row = $(this).closest('tr'); 
    let clone = row.clone(true); 

    // modify edited row and add listener for remove 
    row.find('button') 
    .off() 
    .attr('data-row-action', 'remove') 
    .text('remove') 
    .on('click', function() { 
     $(this).closest('tr').remove(); 
    }); 

    // add new empty row 
    clone.find('input').val(''); 
    clone.appendTo(_self); 
    }); 
}; 

とどんなテーブル

$('#table1').myTablePlugin(); 
$('#table2').myTablePlugin(); 
... 

上でプラグインを呼び出します