Question

我想在Django模板中使用jQuery。当我单击#edit-website-btn按钮时，什么也没有发生。控制台内部没有任何错误。怎么了？

<!-- in <head> -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
    $(function () {
        $('#edit-website-btn').click(function () {
            $('#account-website').hide();
        });
    });
</script>

<!-- in <body> -->
{% for account in accounts %}
  <tr>
    <td>
      <div id="account-website">{{ account.website }}</div>
      <button type="button" class="btn btn-outline-primary" id="edit-website-btn">
        Edit
      </button>
      <form id="website-form" class="hidden">
        <input type="text" id="new-website" name="new-website">
      </form>
    </td>
  </tr>
{% endfor %}

Answer 1

问题是因为输出HTML的Django循环正在使用相同的id创建多个元素，这是无效的。您可以改用常见的类来解决此问题，然后在jQuery中使用DOM遍历来单击按钮时关联元素。试试这个：

<td>
  <div class="account-website">{{ account.website }}</div>
  <button type="button" class="btn btn-outline-primary edit-website-btn">
    Edit
  </button>
  <form id="website-form" class="hidden">
    <input type="text" class="new-website" name="new-website">
  </form>
</td>

$(function () {
  $('.edit-website-btn').click(function () {
    $(this).siblings('.account-website').hide();
  });
});

带有.hide（）函数的jQuery代码在Django模板中不起作用

1 个答案: