为什么 Jquery 不从后续数据页面打开对话框？
Why is Jquery not opening dialog from subsequent datable pages?
我有一个包含 3000 多个项目的列表，这些项目填充到 table 中并进行了分页
@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
在 table 我有一个按钮，用于显示一个对话框，其中包含有关程序的更多信息。此按钮事件由 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');
}
});
});
})
现在我的问题是，这仅适用于第一页，但不适用于任何后续页面。
可能是什么问题，我该如何解决？
$(document).ready(function() {
$('.programDetails').on('click',function() {
// Your code
});
})
代码等待 ready 执行，这发生在加载文档时，然后为所有具有 programDetails class 的元素创建一个 click 事件.这就是为什么这适用于加载文档时已经存在的元素。但是，当您单击更多按钮时要显示的较新元素在触发 ready 时不存在，因此，即使它们在 programDetails class生成它们时，它们在文档加载时没有 class 因为它们当时不存在。
解决方案 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 处理程序，一旦它们被创建为 class 或者 class 被分配给它们，就会匹配内部选择器。
我有一个包含 3000 多个项目的列表，这些项目填充到 table 中并进行了分页
@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
在 table 我有一个按钮，用于显示一个对话框，其中包含有关程序的更多信息。此按钮事件由 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');
}
});
});
})
现在我的问题是，这仅适用于第一页，但不适用于任何后续页面。 可能是什么问题，我该如何解决？
$(document).ready(function() {
$('.programDetails').on('click',function() {
// Your code
});
})
代码等待 ready 执行，这发生在加载文档时，然后为所有具有 programDetails class 的元素创建一个 click 事件.这就是为什么这适用于加载文档时已经存在的元素。但是，当您单击更多按钮时要显示的较新元素在触发 ready 时不存在，因此，即使它们在 programDetails class生成它们时，它们在文档加载时没有 class 因为它们当时不存在。
解决方案 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 处理程序，一旦它们被创建为 class 或者 class 被分配给它们，就会匹配内部选择器。