Question

我有一个html对话框，其中包含一个通过动态创建的无序列表项打开的表单。这部分工作正常，但我以表格形式输入信息并提交，它可以工作。但是，如果我单击无序列表中的另一个项目以打开对话框并单击提交，它将使用先前的数据和输入的数据进行提交，然后，如果我单击第三个项目以打开对话框，它将从第一个发送数据+第二+第三形式。并不断。为什么？如何正确关闭或清除对话框，以便每次我都像第一次打开对话框一样。

我尝试了paymentDialog.close();我尝试了paymentDialog.empty

html中的对话框：

<dialog class="mdl-dialog" id="paymentDialog">
<div class="mdl-dialog__actions">
            <button type="button" class="mdl-button" id='paymentSubmit'>Submit</button>
            <button type="button" class="mdl-button" id='close'>Cancel</button>
          </div>
</dialog>

javascript：

the dinamically created ul item :
jobLi3.addEventListener('click', function(){
        paymentDialogClick(doc.data().veh_id)
    });

打开对话框：

var paymentDialog = document.querySelector('#paymentDialog');
paymentDialog.showModal();

测试结果：

paymentDialog.querySelector('#paymentSubmit').addEventListener('click', function() {
       // this result will be added over and over as i open the dialog with different elements in the list.
        console.log("total "+theChargeTotal.toString());
      });

预期结果：每次打开对话框时，它都不应该包含上次打开的数据（应销毁先前的实例）实际结果：控制台日志显示上一个对话框+当前对话框的结果

选择li时会调用的完整功能：

//paymentdialog:
function paymentDialogClick(jobId){
    var theChargeTotal = 0;
    var thePaymentTotal = 0;

    if (! paymentDialog.showModal) {
        dialogPolyfill.registerDialog(paymentDialog);
      }
      db.collection('job_charges').where('job_id', '==', jobId).get().then(
          function(myChargesDocs){
              myChargesDocs.forEach(function(currentCharge){
                  theChargeTotal += currentCharge.data().total;
              })

              db.collection('job_payments').where('job_id', '==', jobId).get().then(
                  function(myPaymentsDocs){
                      myPaymentsDocs.forEach(function(currentPayment){
                          thePaymentTotal += currentPayment.data().paymentTotal;
                      })
                      //
                      var theAmountLeft = theChargeTotal - thePaymentTotal;
              var labelTotal = paymentDialog.querySelector('#currentTotal');
              if(theChargeTotal == 0){
                labelTotal.textContent = "No Charges On This Job.";
              }else{
                labelTotal.textContent = "Current Bill : "+theAmountLeft.toString();  
              }

              paymentDialog.showModal();
                  }
              )
          }
      )

      paymentDialog.querySelector('#close').addEventListener('click', function() {

        paymentDialog.close();

      });
      paymentDialog.querySelector('#paymentSubmit').addEventListener('click', function() {

        console.log("total "+theChargeTotal.toString());
      });
}

Answer 1

找到了解决方法。我所做的是在像这样关闭它后用jQuery JUST重新加载了该元素：

paymentDialog.close();
$("#paymentDialog").load(" #paymentDialog > *");

效率不高，但是现在我可以继续进行我的项目了。如果有人能更好地摆脱对话框实例，请随时告诉我。

如何清除或制作/删除HTML对话框的新实例

1 个答案: