我尝试使用 jQuery 从输入文本中获取值,但我只获取了第一个值。输入文本是循环的。
这是 HTML:
<div class="item-container-add">
@foreach($cartCollection as $cart)
@if($cart['name'] != 'asdfghjklkjgfds123890')
<div class="row row-add mr-1">
<div class="col-sm-6">
<input type="text" class="id_delete" name="id_delete" id="id_delete" value="{{ $cart['id'] }}">
</div>
<div class="col-sm-2 border-cart">
<button class="btn btn-del delete_button" name="delete_button" type="submit">Hapus<img class="icon-delete" src="./svg/delete.svg"></button>
</div>
</div>
@endif
@endforeach
</div>
从这些 HTML 中,我得到了 4 个不同的 ID,它们都有自己的删除按钮。当我尝试单击删除时,我的 jQuery 函数仅从这些循环中获取第一个 ID。它应该在我单击按钮的地方获得 ID。这是我的 jQuery 函数:
$(document).on('click', '.delete_button', function(e) {
var a = $("#id_delete").val();
alert(a);
$.ajax({
/* some ajax function */
});
});
最佳答案
首先,您需要从您在循环中创建的 HTML 元素中删除 id
属性。 id
值在 DOM 中必须是唯一的。使用元素上的通用类来选择它们。
您的问题的原因是因为在点击事件处理程序中您通过其 id
选择元素。由于这是重复项,因此只能找到具有该 id
的第一个元素,因此您只能获得第一个值。要解决此问题,您可以在点击事件处理程序中使用 this
关键字来引用引发事件的元素。然后您可以使用 DOM 遍历方法,例如 closest()
和 find()
,从相关字段中检索值。试试这个:
<div class="item-container-add">
@foreach($cartCollection as $cart)
@if($cart['name'] != 'asdfghjklkjgfds123890')
<div class="row row-add mr-1">
<div class="col-sm-6">
<input type="text" class="id_delete" name="id_delete" value="{{ $cart['id'] }}">
</div>
<div class="col-sm-2 border-cart">
<button class="btn btn-del delete_button" name="delete_button" type="submit">Hapus<img class="icon-delete" src="./svg/delete.svg"></button>
</div>
</div>
@endif
@endforeach
</div>
$(document).on('click', '.delete_button', function(e) {
var a = $(this).closest('.row').find('.id_delete').val();
console.log(a);
});
关于javascript - jQuery 从输入文本中获取错误数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57371562/