我在分页栏上遇到点击事件的问题。它运行一次。例如:
我已经使用Laravel创建了一个分页视图。我想在用户点击分页数时尝试这样做,清空容器div并使用HTML
{{1添加新的JQuery
调用。但是用户第一次点击分页数字它工作正常,然后用户点击另一个数字然后页面刷新。我想在不刷新的情况下添加内容。
我按照这个链接第一个回答:[如何使用Laravel分页与Ajax ajax
这是我的代码:
在搜索控制器上
(Jquery)?][1]
在车辆列表部分视图
$vehicles = Vehicle::has('image')->orderBy('vehicles.stockNo', 'desc')->paginate(6);
if(Request::ajax())
{
$html = View::make('templates.partials.vehicle-list',compact('vehicles'))
->with('page','STOCK')->render();
return Response::json(array('html' => $html));
}
return View::make('search',compact('vehicles')) ->with('page','STOCK');
在搜索视图
@foreach($vehicles as $vehicle)
<div class="col-md-12 search-vehicle-list-item">
<div class="col-md-8">
<div class="search-vehicle-title h4 col-md-12">{{ $vehicle->name . " " . $vehicle->registerYear }}</div>
<div class="search-vehicle-short-description h6 col-md-12">
@if(strlen($vehicle->details) > 250)
substr( {{ $vehicle->details }}, 0, 250)
@else
{{ $vehicle->details }}
@endif
</div>
<div class="search-vehicle-short-other h6 col-md-12">
<div class="col-md-4">{{ $vehicle->milage }} KM</div>
<div class="col-md-4">{{ $vehicle->registerYear }} </div>
<div class="col-md-4">{{ $vehicle->price }} JPY</div>
</div>
</div>
</div>
@endforeach
{{ $vehicles->links() }}
@section('scripts')
<script type="text/javascript">
$(document).ready(function(){
$(".pagination a").click(function()
{
var myurl = $(this).attr('href');
$.ajax({
url: myurl,
type: "get",
datatype: "html"
})
.done(function(data)
{
$("#vehicleList").empty().html(data.html);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
return false;
});
});
</script>
@stop()
我认为问题是将返回的数据设置为div后,click事件无法正常工作,我尝试了很多东西却找不到任何东西。请帮帮我。
答案 0 :(得分:2)
请使用此
$(document).on('click', '.pagination a', function(){
//your code
});
的实例
$(".pagination a").click(function(){
//your code
});
答案 1 :(得分:1)
我通过Wolfs&#39;得到了答案。回答。我必须在这种情况下使用委托点击事件,我使用以下代码并且工作正常..
@section('scripts')
<script type="text/javascript">
$(document).ready(function(){
$("#vehicleList").on("click", ".pagination a",function()
{
var myurl = $(this).attr('href');
$.ajax({
url: myurl,
type: "get",
datatype: "html"
//beforeSend: function()
//{
// $('#ajax-loading').show();
//}
})
.done(function(data)
{
//$('#ajax-loading').hide();
$("#vehicleList").empty().html(data.html);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
return false;
});
});
</script>
@stop()