Laravel:Jquery关于点击功能的问题

Question

我正在尝试alert，但点击功能是第一个按钮上的running only once。但我有CCD_ 3。

我正在通过Laravel从表中的数据库中获取数据。只有一个按钮运行一个功能，其他按钮则不会发生任何事情。

Jquery：

jQuery(document).ready(function(e)  {
$('#restore-data').on('click', function(e) {
var val = $("#thisr").attr('value');
alert(val);
});
});

视图：

<table id="recover-table" class="table" >
<thead>
<tr class="bg-info">
<th>Teacher Name</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($trashs as $trash)
<tr id="thisr" value="{{$trash->id}}">
<td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>
<td class="text-nowrap ">{{$trash->deleted_at}}</td>
<td class="text-nowrap "><button type="submit"  class="" name="id" 
value="{{$trash->id}}" id="restore-data">Delete</button></td>
</tr>
@endforeach </tbody></table>

现在甚至警报都不起作用，但我想在从表中删除记录后实现刷新表。

更新：现在警报工作正常，但当我按下按钮删除记录时，只有一行正在删除。该函数运行一次。

完成Js:

jQuery(document).ready(function(e)  {
$('#restore-data').on('click', function(e) {
let teacher_id=$(this).attr('value');
console.log('Restore button clicked!')
e.preventDefault();
$.ajax(
{
url: "/teachers/recover/" + $('#restore-data').attr("value"),
type: 'GET', // Just delete Latter Capital Is Working Fine
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: teacher_id,
success: function (data) {
console.log(data.msg);
console.log(teacher_id);
if(data.msg){
$('#thisr').remove();
$('#response').empty();
$(".toast").toast('show');
$('#response').append(data.msg);
}
},
error: function (xhr) {
console.log("Error Restoring Record");
//console.log(xhr.responseText);
},
});
});
});

Answer 1

您可以尝试使用类"restore data">

$(document).ready(function(e)  {
$(document).on('click', '.restore-data', function(e) {
var val = $('#thisr').val();
alert(val);
});
});

As id对于每个元素都应该是唯一的。

你可以试试

@foreach($trashs as $trash)
<tr>
<td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>
<td class="text-nowrap ">{{$trash->deleted_at}}</td>
<td class="text-nowrap ">
<button type="button" data-trash-id="{{$trash->id}}" class="restore-data">Delete</button>
</td>
</tr>
@endforeach

JS作为

$(document).on('click', '.restore-data', function(e) {
var trash_id = $(this).attr('data-trash-id');
alert(trash_id);
});

Answer 2

更改此行。

var val = $("#thisr").attr('value');

to(因为按钮中有value属性(：

var val = $(this).attr('value');

或者(由于您具有值属性td(：

var val = $(this).parent('tr#thisr').attr('value')

删除一行。

$('#restore-data').on('click', function(e) {
var _this = $(this);
...
if(data.msg){
_this.parent('tr#thisr').remove();
....

同时将按钮类型更改为按钮。

<button type="button"  class="" name="id" 
value="{{$trash->id}}" id="restore-data">Delete</button></td>

Answer 3

您为所有按钮提供了相同的id，并且id必须是特定按钮的唯一id，这样您就可以用数组的键定义唯一id，并将其传递给函数

@foreach($trashs as $key=>$trash)
<tr id="thisr{{$key}}">
<td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>
<td class="text-nowrap ">{{$trash->deleted_at}}</td>
<td class="text-nowrap ">
<button type="button"  class="" name="id" value="{{$trash->id}}" id="restore-data{{$key}}" onclick="restoreData({{$key}})">Delete</button>
</td>
</tr>
@endforeach

function restoreData(key){
var val = $("#restore-data"+key).attr('value');
alert(val);
// you can use either
$("#restore-data"+key).closest('tr').remove();
// OR
$('#thisr'+key).remove();
}