Dalam proyek yang sedang saya kerjakan, Ada banyak item yang harus dibuka dialognya. Untuk setiap dialog baru, data di dalam berubah dan yang telah saya lakukan menggunakan Javascript. Sekarang Jika saya menambahkan elemen apa pun seperti ucapkan kotak centang ke dialog dari Javascript, Materi js tidak berfungsi. Jadi saya memeriksa masalah serupa dan mendapat jawaban, yang telah saya terapkan dan masih tidak berfungsi. Dalam cuplikan ini saya telah membuat situasi serupa. Tombol Tambah digunakan untuk menambahkan ke dialog dan ketika Dialog terbuka, kotak centang tidak berperilaku seperti pada dialog selama pemuatan halaman. Untuk menunjukkan ini, saya telah menambahkan Kotak Centang sebelumnya, bukan dari Javascript. Setelah menambahkan Kotak Centang dari Javascript, kotak centang lama yang ada juga tidak berfungsi.

Tolong bantu saya, itu akan sangat membantu.

function resetJs(path) {
  var scripts = document.getElementsByTagName('script'),
    newScript = document.createElement("script");

  newScript.src = path + "?timestamp=" + Math.round(new Date().getTime() / 1000);

  for (var i = 0; i < scripts.length; ++i) {
    var srcUrl = scripts[i].getAttribute('src');
    if (srcUrl && srcUrl.indexOf(path) > -1) {
      scripts[i].parentNode.replaceChild(newScript, scripts[i]);
    }
  }
}
var dialog = document.querySelector('dialog');

var addData = document.querySelector('#add');
addData.addEventListener('click', function() {
  var data = document.querySelector('#dialogContent');
  data.innerHTML += '<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"><input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox From JS</span></label>';

});



var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {

  dialog.showModal();
  resetJs('https://code.getmdl.io/1.3.0/material.min.js');
});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
<button id="add" type="button" class="mdl-button">Add</button>
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Allow data collection?</h4>
  <div class="mdl-dialog__content" id="dialogContent">
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"><input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox Added Before</span></label>
    <p>
      Allowing us to collect data will let us get you the information you want faster.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Agree</button>
    <button type="button" class="mdl-button close">Disagree</button>
  </div>
</dialog>
0
Sreekanta B S V 30 Mei 2020, 08:49

1 menjawab

Jawaban Terbaik

Dari dokumen mdl di sini

Material Design Lite akan secara otomatis mendaftarkan dan merender semua elemen yang ditandai dengan kelas MDL saat halaman dimuat. Namun jika Anda membuat elemen DOM secara dinamis, Anda perlu mendaftarkan elemen baru menggunakan fungsi upgradeElement.

Jadi, yang dapat Anda lakukan adalah dalam fungsi addData Anda;

var addData = document.querySelector("#add");
  addData.addEventListener("click", function() {
    var data = document.querySelector("#dialogContent");
    var label = document.createElement("label");
    label.className = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect";
    label.innerHTML =
      '<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked><span class="mdl-checkbox__label">Checkbox From JS</span>';
    label.htmlFor = "checkbox-1";
    componentHandler.upgradeElement(label);
    data.appendChild(label);
  });

Anda perlu menggunakan componentHandler.upgradeElement untuk mengupgrade elemen yang dibuat secara dinamis menjadi elemen material dan kemudian menambahkan turunan ke data.

Silakan lihat codesandbox ini

1
Dipesh Dulal 30 Mei 2020, 08:09