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

Question

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

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

我得到如下形式的 url :

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

而不是绑定到按钮的 id（在你的情况下它是多个，所以它只会绑定第一个按钮的事件）使用表单的提交事件

同时从你的按钮中删除 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>