Обновление объектов javascript с загруженным извне содержимым в innerhtml - PullRequest
Новая
       5

Обновление объектов javascript с загруженным извне содержимым в innerhtml

0 голосов
/ 29 мая 2018

Когда я пытаюсь загрузить в сборную систему, она не работает, когда она загружается через JavaScript.но он работает, когда я жестко его кодирую.

У меня есть следующий код 

var VeilingenZoeken = document.getElementById("VeilingenZoeken");

function getZoekResultaten() {
    // console.log(rubriekenzoeken.value);
    const url = "backend/veilingen/VeilingenZoekresultaat.php?q=" + VeilingenZoeken.value;
    fetch(url)
        .then(
            response => response.text()
        ).then(
        html => document.getElementById("veilingItems").innerHTML = html
    );
}

, который вызывается этим html-тегом 

<input class="center" type="text" placeholder="Veilingen zoeken..." name="VeilingenZoeken"
               id="VeilingenZoeken" onkeypress="getZoekResultaten();"> <br>

Он загружается вследующий фрагмент html 

<div class="col s12">
   <ul class="collapsible">       
      <li>
         <div class="collapsible-header"><i class="material-icons">gavel </i> Gebruikersnaam: <span class="badge"><i  class="material-icons white">info</i></a></span><a class="waves-effect waves-light btn-large" href="#">Wave</a></div>
      </li>
  </ul>

Однако, если она загружена таким образом, функция сворачивания не работает.Есть ли способ заставить его загрузить?

ПРИМЕЧАНИЕ: Я думаю, что название немного сбивает с толку, но я понятия не имею, что еще будет подходящим названием для этого поста.

1 Ответ

0 голосов
/ 29 мая 2018

Вы можете вручную инициализировать складные элементы, вызывая M.Collapsible.init() или collasible() при использовании jQuery

https://materializecss.com/collapsible.html#intialization

Инициализация 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.collapsible');
  var instances = M.Collapsible.init(elems, options);
});

// Or with jQuery

$(document).ready(function(){
  $('.collapsible').collapsible();
});

Так что просто позвоните либо после загрузки контента 

var container = document.getElementById("veilingItems");
fetch(url)
 .then(response => response.text())
 .then(html => {
   container.innerHTML = html;
   M.Collapsible.init(container.querySelector('.collapsible'));
   //or if using jQuery
   $('.collapsible').collapsible();
 });

Демо 

var html = `<ul class="collapsible">
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
    <li>
      <div class="collapsible-header">
        <i class="material-icons">gavel</i> Gebruikersnaam:
        <span class="badge">
          <i class="material-icons white">info</i> 
        </span>
        <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      </div>
      <div class="collapsible-body">Body</div>
    </li>
  </ul>`;
var container = document.getElementById("veilingItems");
document.querySelector('button').addEventListener('click', () => {
  container.innerHTML = html;
  var collapse = container.querySelector('.collapsible');
  M.Collapsible.init(collapse);
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div id="veilingItems"></div>
<button>Load</button>
...