为什么Jquery没有从后续的可数据页打开对话框

Question

我有一个3000多个项目的列表，这些项目被填充到一个表中并分页

@foreach ($programs as $program)
<tr>
<td>{{ $program->id }}</td>
<td>
@if ($program->module == 'dmodule')
Direct Training Module
@elseif ($program->module == 'emodule')
Equivalence Module
@elseif ($program->module == 'gmodule')
Generalization Module
@else
Transformation Module
@endif
</td>
<td>
{{ $program->title }}
</td>
<td>
<div class="col-md-6">
<button type="button" class="btn btn-md programDetails"
data-id="{{ $program->id }}">
<i class="fa fa-file" aria-hidden="true"></i>
</button>
</div>
</td>
<td>
<div class="col-md-6">
<a href="{{ $program->video_link }}" class="btn btn-md"><i
class="fa fa-video" aria-hidden="true"></i></a>
</div>
</td>
<td>
<div class="col-md-6">
<a href="{{ route('program.print', $program->id) }}"
class="btn btn-md"><i class="fa fa-print"
aria-hidden="true"></i></a>
</div>
</td>
<td>
<div class="row">
<div class="col-md-4">
@if ($client->hasProgram($program->id))
@else
<button type="button" class="btn btn-xs btn-success programAttachment"
data-id="{{ $program->id }}" data-filter="{{ $client->id }}" >
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
@endif
</div>
<div class="col-md-4">
<a href="{{ route('programs.edit', $program->id) }}"
class="btn btn-xs btn-warning" data-toggle="tooltip"
data-placement="top" title="Edit"><i class="fa fa-pen"
aria-hidden="true"></i></a>
</div>
<div class="col-md-4">
<form action="{{ route('programs.destroy', $program->id) }}"
method="POST" class="form-inline">
<button class="btn-danger btn-xs" data-toggle="tooltip"
data-placement="top" title="Delete"><i
class="fa fa-trash"></i></button>
{{ method_field('DELETE') }}
{{ csrf_field() }}
</form>
</div>
</div>
</td>
</tr>
@endforeach

在表中，我有一个按钮，用于显示一个对话框，其中包含有关程序的更多信息。此按钮事件由javascript代码处理，如下所示

$(document).ready(function() {
$('.programDetails').on('click',function() {
var progid = $(this).data('id');
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// AJAX request
$.ajax({
url: '/carriculumbank/program',
type: 'post',
data: {
_token: CSRF_TOKEN,
progid: progid
},
success: function(response) {
// Add response in Modal body
$('.modal-content').html(response);
$(".modal-dialog").css("width", "90%");
// Display Modal
$('#programModal').modal('show');
}
});
});
})

现在我的问题是，这只适用于第一页，但不适用于任何后续页面。问题出在哪里？我该如何解决？

Answer 1

$(document).ready(function() {
$('.programDetails').on('click',function() {
// Your code
});
})

代码等待执行ready，这在加载文档时发生，然后为具有programDetails类的所有元素创建一个click事件。这就是为什么这适用于加载文档时已经存在的元素。但是，当您单击更多按钮时要显示的较新元素在触发ready时不存在，因此，即使它们在生成时具有programDetails类，它们在文档加载时也没有该类，因为当时它们不存在。

解决方案1

您可以在生成代码时创建onclick处理程序

@foreach ($programs as $program)
<tr>
<td>{{ $program->id }}</td>
<td>
@if ($program->module == 'dmodule')
Direct Training Module
@elseif ($program->module == 'emodule')
Equivalence Module
@elseif ($program->module == 'gmodule')
Generalization Module
@else
Transformation Module
@endif
</td>
<td>
{{ $program->title }}
</td>
<td>
<div class="col-md-6">
<button type="button" class="btn btn-md programDetails" onclick="programDetailClick(this)"
data-id="{{ $program->id }}">
<i class="fa fa-file" aria-hidden="true"></i>
</button>
</div>
</td>
<td>
<div class="col-md-6">
<a href="{{ $program->video_link }}" class="btn btn-md"><i
class="fa fa-video" aria-hidden="true"></i></a>
</div>
</td>
<td>
<div class="col-md-6">
<a href="{{ route('program.print', $program->id) }}"
class="btn btn-md"><i class="fa fa-print"
aria-hidden="true"></i></a>
</div>
</td>
<td>
<div class="row">
<div class="col-md-4">
@if ($client->hasProgram($program->id))
@else
<button type="button" class="btn btn-xs btn-success programAttachment"
data-id="{{ $program->id }}" data-filter="{{ $client->id }}" >
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
@endif
</div>
<div class="col-md-4">
<a href="{{ route('programs.edit', $program->id) }}"
class="btn btn-xs btn-warning" data-toggle="tooltip"
data-placement="top" title="Edit"><i class="fa fa-pen"
aria-hidden="true"></i></a>
</div>
<div class="col-md-4">
<form action="{{ route('programs.destroy', $program->id) }}"
method="POST" class="form-inline">
<button class="btn-danger btn-xs" data-toggle="tooltip"
data-placement="top" title="Delete"><i
class="fa fa-trash"></i></button>
{{ method_field('DELETE') }}
{{ csrf_field() }}
</form>
</div>
</div>
</td>
</tr>
@endforeach

请注意，在上面我只做了一个小改动。因此，让我们定义函数：

function programDetailClick(item) {
var progid = $(item).data('id');
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// AJAX request
$.ajax({
url: '/carriculumbank/program',
type: 'post',
data: {
_token: CSRF_TOKEN,
progid: progid
},
success: function(response) {
// Add response in Modal body
$('.modal-content').html(response);
$(".modal-dialog").css("width", "90%");
// Display Modal
$('#programModal').modal('show');
}
});
};

其想法是在生成内容时创建click处理程序。

解决方案2

您可以对加载文档时存在的元素调用.on()，该元素将包含要为其创建click事件的所有元素：

$(document).ready(function() {
$('body').on('click', '.programDetails',function() {
var progid = $(this).data('id');
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// AJAX request
$.ajax({
url: '/carriculumbank/program',
type: 'post',
data: {
_token: CSRF_TOKEN,
progid: progid
},
success: function(response) {
// Add response in Modal body
$('.modal-content').html(response);
$(".modal-dialog").css("width", "90%");
// Display Modal
$('#programModal').modal('show');
}
});
});
})

请注意，我使用了body作为外部选择器，因为我对您的结构了解不够，但建议选择一个更具体的外部选择器，即在文档加载时存在的选择器，它将包含您想要为其创建click处理程序的所有标记，但它不包含太多。您的选择器越具体越好。

这种方法还将为未来的标记创建click处理程序，在创建内部选择器时将其与该类或该类分配给它们。