Django：添加 {% csrf_token %} 時動態 jquery 表單不起作用

Question

我在使用 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>

在此添加之后，表單不能再插入/添加新字段。 需要幫忙。

Answer 1

您的選擇器如下：

"form > p:first-child" ：這將為您提供一個p標簽，它是其父標簽的第一個子標簽，當您將{% csrf_token %}放在p標簽之前時，它不再是form標簽的第一個子標簽.
"form > p:last-child" ：當您添加提交按鈕時，這將為您提供一個p標簽，它是其父標簽的最后一個子標簽，沒有 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>

Django：添加 {% csrf_token %} 時動態 jquery 表單不起作用

問題描述

1 個解決方案

解決方案1
0 2021-04-19 07:34:54

Django：添加 {% csrf_token %} 時動態 jquery 表單不起作用

問題描述

1 個解決方案

解決方案1 0 2021-04-19 07:34:54

解決方案1
0 2021-04-19 07:34:54