Кнопка Javascript не отвечает при нажатии

Question

Я пытаюсь использовать listjs в проекте django, который я делаю.Но даже при запуске фрагмента, взятого из документации, django отказался запускать его должным образом.Возьмите эту ручку , например.Я копирую это и помещаю в мой шаблон html.Шаблон теперь имеет следующий

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
        <script type="text/javascript">
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);
    </script>

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

Результат - страница загружается нормально, без ошибок в консоли, но кнопка или поиск не работают вообще.Я думаю, это что-то очевидное, что я здесь упускаю, но, кажется, не могу отследить это.

Answer 1

Попробуйте загрузить сценарии в конце своего фрагмента.listjs библиотека ожидает загрузки DOM, прежде чем вы сможете создать новый List.

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script type="text/javascript">

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

</script>