CODEWITHSUNDEEP
javascriptphpjqueryhtml
Ofri
Ofri

Reputation: 51

MaskMoney.js not working on Dynamic add Field

i have some problem about dynamic add field combaine MaskMoney,

HTML part

<div class='table-responsive mailbox-messages'>

             <table id="dataTable" class='table table-hover'>
             <tr>
                <th>Keperluan</th>
                  <th>Tanggal Transaksi</th>
                <th>Total Transaksi</th>
                <th>Keterangan</th>
                  <th>Scan Foto</th>
                  <th>Action</th>
              </tr>
                <tbody class="input_fields_wrap">
        <tr>
          <td><input type="text" name="mytext[]" id="perlu'+x+'" class="form-control" required="required" placeholder="Keperluan"/></td>
            <td><input type="text" name="mytexts[]" id="s" class="form-control tgl" required="required" placeholder="Tanggal Transaksi"/></td>
              <td><input type="text" name="mytexts[]" id="demo1" class="form-control numeric "  required="required" placeholder="Only Number"/></td>
                <td><input type="text" name="mytexts[]" id="s" class="form-control" required="required" placeholder="Keterangan"/></td>
                  <td><input type="file" name="mytexts[]" id="s" class="small" required="required"/></td>
                  <td><button class="add_field_button btn btn-success">Add Field</button></td>


          </tr>


                </tbody>
             </table>
 </div>

Javascript

$(document).ready(function() {
     var max_fields      = 10; //maximum input boxes allowed
     var wrapper         = $(".input_fields_wrap"); //Fields wrapper
     var add_button      = $(".add_field_button"); //Add button ID
     var x = 1; //initlal text box count
     $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
         if(x < max_fields){ 
             x++; //text box increment
            i = $('<tr><td><input type="text" name="mytext[]" id="perlu'+x+'" class="form-control" required="required" placeholder="Keperluan"/></td><td><input type="text" name="mytexts[]" id="s" class="form-control tgl" required="required" placeholder="Tanggal Transaksi"/></td><td><input type="text" name="mytexts[]" id="demo'+x+'" class="form-control numeric" required="required" placeholder="Only Number" /></td><td><input type="text" name="mytexts[]" id="s" class="form-control" required="required" placeholder="Keterangan"/></td><td><input type="file" name="mytexts[]" id="s" class="small" required="required"/></td><td><a href="#" class="remove_field btn btn-danger">Remove</a></td></tr>');
             //re-init mask money to apply new added input 
            $(wrapper).append(i); //add input box

         }


    });


$(wrapper).on('click', '.remove_field', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).closest("tr").remove(); //Remove field html
        x--; //Decrement field counter
    });



});

$("#demo1").maskMoney({prefix:'Rp ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});

The running snippet of my code can be found here

The problem on Field "Total Transaksi", MaskMoney Notworking,

first field work fine but when button Add new Field = NOT WORK.

I've searched on internet but the answer is still eluding me.

Thanks

Upvotes: 0

Views: 998

Answers (1)

Fillip Peyton
Fillip Peyton

Reputation: 3657

When you run the maskMoney() method, you run it only once; at the beginning of your page load. After that, other new fields don't have the binding that maskMoney() provides. You will either need to rebind to each new set of elements or use event delegation. It doesn't look like the maskMoney plugin has a feature to delegate, so you can rebind on the creation of each button:

http://jsfiddle.net/rmj3ryer/1/

Upvotes: 1

Related Questions