javascript - 将单击的表单传递给 bootbox.confirm()

Question

我有一个带有submit的表单，每个表单都是删除一个对象:

{% for person in persons %}
<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' onclick="bootbox.confirm();" id="del"  class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>
{% endfor %}

当我点击删除图标时，相应的人应该被删除，

我正在使用bootbox.confirm():

   <script type="text/javascript">
$(document).ready(function(){
$(".btn#del").click(function(e) {
    e.preventDefault();
    var lHref = $('form#form1').attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>

我得到的表单网址如下:

var lHref = $('form#form1').attr('action');
bootbox.confirm("Are you sure?", function(confirmed) {
if(confirmed) {
window.location.href = lHref; ...

问题是，无论我单击哪个删除按钮，表单中的第一个用户都会被删除，所以我想知道如何将 $(this) 传递给 bootbox.confirm () 这样我就可以获得正确的 URL

Answer 1

不要绑定(bind)到按钮的 id(在您的情况下是多个，因此它只会绑定(bind)第一个按钮的事件)使用表单的提交事件

同时删除按钮的 onclick

{% for person in persons %}
<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' id="del"  class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>
{% endfor %}

在 JavaScript 中

<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e) {
    e.preventDefault();
    var lHref = $(this).attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>