访问为循环中的每个项目创建的提交按钮——HTML jQuery AJAX答案

【问题标题】：Accessing submit button which is created for every item in a loop -- HTML jQuery AJAX访问为循环中的每个项目创建的提交按钮——HTML jQuery AJAX
【发布时间】：2020-12-05 00:48:27
【问题描述】：

我有一个愿望清单页面，其中包含项目，每个项目都有一个 删除按钮，该按钮是使用 form 在循环中创建的，每个按钮都有项目id 作为值。每当单击删除按钮时，我都想发出一个发布请求，以便从数据库中删除该项目。

但问题是在循环中创建了许多按钮具有相同的id，那么我如何单独访问它们呢？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>::WISHLIST::</h1>

    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <form method="POST" target="_self">
            <button id="remove_wish" name="remove_wish" type="submit" value={{wish.id}}>Remove</button>
        </form>
        </br>
    {% endfor %}

    <script>
        $(document).ready(function() {
            $('#remove_wish').click(function (event) {
                event.preventDefault();
                alert($('#remove_wish').val())
           $.ajax({
            data : {
                    delete_wish : $('#remove_wish').val()
                    },
                type : 'POST',
                url : '/wishlist/',
                success: function (data) {
                    location.reload();
                },
                error: function (e) {
                    alert('something went wrong')
                }
            });
        });
        })
    </script>


</body>
</html>

在这里我尝试使用相同的 id，但这仅适用于愿望清单上最顶部的项目，对于其他项目，它会给出错误：NoResultFound: No row was found for one()

【问题讨论】：

使用class。 ID 必须是唯一的。
使用class和使用this查找元素可以帮助您删除。
谢谢！有效！我是 jquery 和 ajax 的新手，很抱歉这个幼稚的问题

标签： html jquery ajax forms post

【解决方案1】：

在 DOM 中不应有多个具有相同 id 的元素。

在你的按钮中改变接下来的事情：

为按钮添加一个类。假设 remove_wish。
将按钮的 id 值更改为 wish-{{wish.id}}（例如）。

<button class="remove_wish" id="wish-{{wish.id}}" name="remove_wish" type="submit"value={{wish.id}}>Remove</button>

在您的 AJAX 调用中，更改事件的选择器以侦听类选择器而不是 id 选择器：

$('.remove_wish')

使用substring function获取元素的id：

var id = $(this).attr('id');
var id_value = id.substring(5); //five because "wish-" has five characters.

我认为这应该可以完成工作。

【讨论】：

值可以直接访问：var val = $(this).val()
@RaghavMaheshwari，是的，当然。我没有意识到这一点。

【解决方案2】：

对于如何解决您的问题和提示，我有几个备选方案。

提示： 从 foreach 中删除 <form> 标记，否则您将为每个按钮创建一个表单。理想的情况是只有一个表单和几个按钮。像这样：

<form method="POST" target="_self">
    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <button id="remove_wish" name="remove_wish" type="submit" value={{wish.id}}>Remove</button>
        </br>
    {% endfor %}
</form>

替代方案#1： 正如 @cooper 和 @Shree 已经告诉你的那样，你应该去掉 id 并改用 class。现在，将您的按钮包装在一个容器中，例如 div（它可能带有 id 或 class）（请注意，此容器必须在您的 foreach 之外以及）。并将按钮的类型从submit 更改为button。像这样：

<form method="POST" target="_self">
    <div id="divContainer">
        {% for wish in wishes %}
            <img src={{wish.image_path}} width="150" height="200">
            </br>
            {{wish.material}}
            {{wish.productType}}
            </br>
            {{wish.price}}
            </br>
            <button class="remove_wish" type="button" data-wishid={{wish.id}} >Remove</button>
            </br>
        {% endfor %}
    </div>
</form>

//and then you can manage all your buttons click events like this
$("#divContainer").on("click", "remove_wish", function() {
    var id = $(this).data('wishid');
    //the rest of your code
});

替代方案 #2： 或者更简单，您可以使用 onclick 事件并将您的 id 传递给函数。像这样：

<form method="POST" target="_self">
    {% for wish in wishes %}
        <img src={{wish.image_path}} width="150" height="200">
        </br>
        {{wish.material}}
        {{wish.productType}}
        </br>
        {{wish.price}}
        </br>
        <button type="button" onclick="removeWish(" + {{wish.id}} +")" >Remove</button>
        </br>
    {% endfor %}
</form>

//and outside your $(document).ready(function()
function removeWish(id) {
    //the rest of your code
}

【讨论】：