访问为循环中的每个项目创建的提交按钮——HTML jQuery AJAX
Posted
技术标签:
【中文标题】访问为循环中的每个项目创建的提交按钮——HTML jQuery AJAX【英文标题】：Accessing submit button which is created for every item in a loop -- 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 >
</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 的新手，很抱歉这个幼稚的问题
【参考方案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 >
</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 >
</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 >
</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
【讨论】：
以上是关于访问为循环中的每个项目创建的提交按钮——HTML jQuery AJAX的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 中的每个循环的 Next 和 Prev 按钮功能