为什么SweetAlert在每个循环之后都会被重写？

Question

我试图为我的每一项活动创建一个删除按钮，但是当我对delete按钮应用甜警报时，它将在每次迭代后被重写。因此，无论您按哪个按钮，它都会删除列表中的最后一项。

这是我创建按钮的部分视图中的->。

    <td>
        <form asp-action="DeleteActivity" method="post">
            <input type="hidden" name="ActivityID" value="@Model.Activityid" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button class="btn ff f-16 background-transparant foreground-red delete-confirm" type="submit" id="@Model.Activityid"> Slet </button>
        </form>
    </td>
</tr>

<script type="text/javascript">
        $('.delete-confirm').on('click', function(e) {

        e.preventDefault()
        var requested_to = $(this).attr("id")

        console.log('DeleteRequest on activityID: ' + requested_to);

        swal({
            title: 'Bekræft',
            text: 'Advarsel: Indholdet vil blive permanent slettet!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Slet',
            confirmButtonColor: '#C6472A',
            cancelButtonText: 'Fortryd'
        }).then((result) => {
            if (result.value) {
                $('.delete-confirm').closest('form').submit();
            }
        });
    });
</script>

这是我的主视图，循环正在发生->。

    <table class="tableView pad-5">
        <thead class="background-darkBlue foreground-white">
            <tr>
                <th>Title</th>
                <th>v/ hvem</th>
                <th>Dato</th>
                <th>Afdeling</th>
                <th>Lokale</th>
                <th>Status</th>
                <th>Rediger</th>
                <th>Slet</th>
        </thead>

        <tbody>
            @foreach (Activity a in Model.OrderBy(a => a.date))
            {
                <partial name="ActivitySearchPartialview" model="a" />
            }
        </tbody>
    </table>

如何使循环中每一次迭代中的按钮都是唯一的？

Answer 1

这句话似乎是罪魁祸首

$('.delete-confirm').closest('form').submit();

这将始终标识第一个form。我创建了一个片段来说明这一点，不正确地将form标识为$('.delete-confirm').closest('form')，将form正确标识为$(this).closest('form')，因此，我们没有在DOM中搜索任何.delete-confirm和最接近匹配的form，而是专门搜索我们单击的.delete-confirm和与之最接近的.delete-confirm。这就是为什么我们在第一个控制台日志中得到相同的结果，而不依赖于我们单击的内容和第二个日志的正确结果。

​

$('.delete-confirm').on('click', function(e) {
    e.preventDefault();
    console.log('Incorrect: ');
    console.log($('.delete-confirm').closest('form').attr('asp-action'));
    console.log('Correct: ');
    console.log($(this).closest('form').attr('asp-action'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
    <td>
        <form asp-action="DeleteActivity1" method="post">
            <input type="hidden" name="ActivityID" value="1" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button class="btn ff f-16 background-transparant foreground-red delete-confirm" type="submit" id="1"> Slet </button>
        </form>
    </td>
    <td>
        <form asp-action="DeleteActivity2" method="post">
            <input type="hidden" name="ActivityID" value="2" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button class="btn ff f-16 background-transparant foreground-red delete-confirm" type="submit" id="2"> Slet </button>
        </form>
    </td>
    <td>
        <form asp-action="DeleteActivity3" method="post">
            <input type="hidden" name="ActivityID" value="3" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button class="btn ff f-16 background-transparant foreground-red delete-confirm" type="submit" id="3"> Slet </button>
        </form>
    </td>
</tr>
</table>

​

奇怪的是，您的代码导致删除了最后一个元素而不是第一个元素，所以您所描述的行为与我所描述的bug的行为略有不同，但它可能是一个不同的jQuery版本，一些结构上的细微差别，问题没有澄清，一些服务器端的错误或任何其他问题。然而，您所经历的客户端问题似乎正是我上面描述的问题。