動的に作成されたフィールドにdatepickerを追加する際の問題

Question

私は動的にフォームフィールドを生成してから、datepickerを追加しようとしていますが、新しいdatepickerを追加するたびにフォームの以前のdatepickersをすべて削除します。

class morePayments { 

    constructor() { 
     this.state = 0; 
    }; 

    changeState() { 
     this.state = this.state + 1; 
     if (this.state <= 5) { 
      var dummy = '<fieldset class="form-group row">' + 
         '<label class="col-xs-2 text-right control-label">Amount:</label>' + 
         '<div class="col-xs-4"><input type="text" id="payment[]" name="payment[]"></div>' + 
         '<div class="col-xs-5">' + 
          '<div class="input-group">' + 
           '<span class="input-group-addon"><i class="fa fa-calendar"></i></span>' + 
           '<input type="text" id="paymentdate-' + 
           this.state + '" name="paymentdate-' + this.state + '" />' + 
           '</div>' + 
          '</div>' + 
         '</fieldset>' 
      document.getElementById('modal-body-payment').innerHTML += dummy; 
      $("#paymentdate-" + this.state).datepicker({ 
       dateFormat: "dd-mm-yy" 
      }); 
     } 
    }; 

}; 

state = new morePayments(); 

Answer 1

問題は、この行です：

document.getElementById('modal-body-payment').innerHTML += dummy; 

あなたはそれがDOMツリーが完全にあなたがすべての以前にバインドされたイベントハンドラを失うことを意味当然のどの再構築であることを意味innerHTMLプロパティを書き換えた場合。

代わりに新しいコンテンツを追加します。

$('#modal-body-payment').append(dummy);