Django：添加 {% csrf_token %} 时动态 jquery 表单不起作用答案

【问题标题】：Django: Dynamic jquery form not working when {% csrf_token %} is addedDjango：添加 {% csrf_token %} 时动态 jquery 表单不起作用
【发布时间】：2021-07-13 08:47:47
【问题描述】：

我使用 jquery 在我的 django 模板中使用动态表单，但是当我向表单添加提交按钮或 csrf 令牌时，动态表单停止工作，我无法再添加新字段。

这是我的 html 文件

<html>
<body>

  <form method="post">

    <p>
      <label>Name:</label> <input type="text">
      <label>Number:</label> <input type="number">
      <span class="remove">Remove</span>
    </p>
    <p>
      <span class="add">Add fields</span>
    </p>

  </form>


  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  <script type="text/javascript">
    $(".add").click(function() {
      $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
      return false;
    });

    $(".remove").click(function() {
      $(this).parent().remove();
    });

</script>

</body>
</html>

但是当我插入 {% csrf_token %} 或 <input type="submit" value="Submit"> 时，动态表单不起作用

<form method="post">
{% csrf_token %}
<p>
    <label>Name:</label> <input type="text">
    <label>Number:</label> <input type="number">
    <span class="remove">Remove</span>
</p>
<p>
    <span class="add">Add fields</span>
</p>

</form>

<form method="post">
    
    <p>
        <label>Name:</label> <input type="text">
        <label>Number:</label> <input type="number">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
    <input type="submit" value="Submit">

</form>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
    

    $(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
        return false;
    });

    $(".remove").click(function() {
        $(this).parent().remove();
    });


</script>

在此添加之后，表单无法再插入/添加新字段。需要帮助。

【问题讨论】：

标签： javascript python jquery django django-forms

【解决方案1】：

您的选择器如下：

"form > p:first-child"：这将为您提供一个 p 标签，它是其父标签的 first 子标签，当您将 {% csrf_token %} 放在 p 标签之前时，它不再是它的第一个子标签form 标签。
"form > p:last-child"：这会给你一个p标签，当你添加提交按钮时，它是其父级的last子级，没有p标签是form的最后一个子级标记。

您可以通过使用:first-of-type 和:last-of-type 选择器来解决此问题，尽管这不是一个很好的解决方案，如果添加其他p 标记很容易中断。如果有多个表单标签等，您的解决方案也很容易中断：

<form method="post">
    {% csrf_token %}
    <p>
        <label>Name:</label> <input type="text">
        <label>Number:</label> <input type="number">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
    <input type="submit" value="Submit">

</form>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(".add").click(function() {
    $("form > p:first-of-type").clone(true).insertBefore("form > p:last-of-type");
        return false;
    });

    $(".remove").click(function() {
        $(this).parent().remove();
    });
</script>

【讨论】：