Question

作为非常标准的东西我有一个按钮启动mdl模式对话框，有两个常用按钮，确认和取消，但我有一个“奇怪”的行为：

第一次打开对话框一切都很顺利但是如果我重新打开它（没有刷新页面）它执行两次的代码，再次打开它（没有刷新页面）它执行三次的代码，依此类推。 .. 似乎在没有刷新页面的情况下，对话的结构会累积起来。

对话框的html代码，如mdl指令所示，直接位于 body 标记

下

<body>

  ...

  <!-- START OF DUMMY DIALOG -->
  <dialog id="dummy-dialog" class="mdl-dialog">
    <!-- Title -->
    <h4 class="mdl-dialog__title">Dummy dialog</h4>
    <!-- Content -->
    <div class="mdl-dialog__content">
      <p>Hi, I'm a dummy dialog and my purpose is to check why istances accumulates.</p>
    </div>
    <!-- Actions -->
    <div class="mdl-dialog__actions">
      <button id="dummy-send" type="button" class="mdl-button" >CONFIRM</button>
      <button id="dummy-close" type="button" class="mdl-button">CANCEL</button>
    </div>
  </dialog>
  <!-- END OF DUMMY DIALOG -->

  ...

</body>

js代码如下所示

$(document).ready(function() {
  ...
  $('#button').on('click', function(event) {
    showDummyDialog();
  });
  ...
});

...

function showDummyDialog() {
  const $dummyDialog = $('#dummy-dialog');
  $dummyDialog[0].showModal();

  $dummyDialog.on('click', function(event) {
    switch (event.target.id) {
      case 'dummy-send':
        console.log('confirm pressed');
        $dummyDialog[0].close();
        break;
      case 'dummy-close':
        console.log('cancel pressed');
        $dummyDialog[0].close();
        break;
    }
  });

  $dummyDialog.on('close', function (event) {
    console.log('dummy is closing');
  });
}

我正在测试它并在生产中对话框将被填充。

任何人如此善意地向我致以理解这种行为？感谢

顺便说一句，这是一个fiddle，“不幸的是”正常工作： - （

多次执行mdl对话框

0 个答案: