Question

我正在尝试在正在制作的Django项目中使用listjs。但是，即使运行摘录自文档的摘录，django也拒绝正确运行它。以这个pen为例。我将其复制并放入我的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库期望在创建新的List之前先加载DOM。

<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>

单击时Javascript按钮无响应

1 个答案: