JQuery on click事件只工作一次

我对分页栏上的单击事件有问题。它只运行一次。例如：

我已经使用Laravel创建了一个分页视图。我试图在用户单击分页编号时，清空容器div，并使用

JQuery

ajax

调用将新的

HTML

添加到其中。但用户第一次单击页码时，它工作正常，然后用户单击另一个数字，然后页面刷新。我想添加内容而不刷新

我按照这个链接首先回答：[如何将Laravel分页与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()

@foreach（$vehicles作为$vehicle）
{{$vehicle->name.“$vehicle->registerYear}”
@如果（strlen（$vehicle->details）>250）
substr（{{$vehicle->details}}，0，250）
@否则
{{$vehicle->details}
@恩迪夫
{{$vehicle->milage}公里
{{$vehicle->registerYear}
{{$vehicle->price}}日元
@endforeach
{{$vehicles->links（）}
@节（“脚本”）
$（文档）.ready（函数（）{
$（“.pagination a”）。单击（函数（）
{
var myurl=$（this.attr（'href'）；
$.ajax({
url:myurl，
键入：“获取”，
数据类型：“html”
})
.完成（功能（数据）
{           
$（“#车辆列表”）.empty（）.html（data.html）；
})
.fail（函数（jqXHR、ajaxOptions、thrownError）
{
警报（“服务器无响应”）；
});
返回false；
});
});
@停止（）

在搜索视图上

    <div class="col-md-12 vehicle-listing" id="vehicleList">
        @include('templates.partials.vehicle-list')
    </div>

@包括（'templates.partials.vehicle list'）

---

我想问题是click事件在返回数据集到div后不起作用，我尝试了很多方法，但没有找到任何方法。请帮帮我。

我通过沃尔夫斯的回答得到了答案。在这种情况下，我必须使用委托单击事件，我使用了以下代码，效果良好

@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>

@节（“脚本”）
$（文档）.ready（函数（）{
$（“#车辆列表”）。在（“单击”，“分页a”，函数（）上）
{
var myurl=$（this.attr（'href'）；
$.ajax({
url:myurl，
键入：“获取”，
数据类型：“html”
//beforeSend:function（）
//{
//$（'#ajax加载'）.show（）；
//}
})
.完成（功能（数据）
{           
//$（'#ajax加载'）.hide（）；
$（“#车辆列表”）.empty（）.html（data.html）；
})
.fail（函数（jqXHR、ajaxOptions、thrownError）
{
警报（“服务器无响应”）；
});
返回false；
});
});

---

@停止（）

我通过沃尔夫斯的回答得到了答案。在这种情况下，我必须使用委托单击事件，我使用了以下代码，效果良好

@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>

@节（“脚本”）
$（文档）.ready（函数（）{
$（“#车辆列表”）。在（“单击”，“分页a”，函数（）上）
{
var myurl=$（this.attr（'href'）；
$.ajax({
url:myurl，
键入：“获取”，
数据类型：“html”
//beforeSend:function（）
//{
//$（'#ajax加载'）.show（）；
//}
})
.完成（功能（数据）
{           
//$（'#ajax加载'）.hide（）；
$（“#车辆列表”）.empty（）.html（data.html）；
})
.fail（函数（jqXHR、ajaxOptions、thrownError）
{
警报（“服务器无响应”）；
});
返回false；
});
});

---

@停止（）

我通过沃尔夫斯的回答得到了答案。在这种情况下，我必须使用委托单击事件，我使用了以下代码，效果良好

@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>

@节（“脚本”）
$（文档）.ready（函数（）{
$（“#车辆列表”）。在（“单击”，“分页a”，函数（）上）
{
var myurl=$（this.attr（'href'）；
$.ajax({
url:myurl，
键入：“获取”，
数据类型：“html”
//beforeSend:function（）
//{
//$（'#ajax加载'）.show（）；
//}
})
.完成（功能（数据）
{           
//$（'#ajax加载'）.hide（）；
$（“#车辆列表”）.empty（）.html（data.html）；
})
.fail（函数（jqXHR、ajaxOptions、thrownError）
{
警报（“服务器无响应”）；
});
返回false；
});
});

---

@停止（）

我通过沃尔夫斯的回答得到了答案。在这种情况下，我必须使用委托单击事件，我使用了以下代码，效果良好

@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>

@节（“脚本”）
$（文档）.ready（函数（）{
$（“#车辆列表”）。在（“单击”，“分页a”，函数（）上）
{
var myurl=$（this.attr（'href'）；
$.ajax({
url:myurl，
键入：“获取”，
数据类型：“html”
//beforeSend:function（）
//{
//$（'#ajax加载'）.show（）；
//}
})
.完成（功能（数据）
{           
//$（'#ajax加载'）.hide（）；
$（“#车辆列表”）.empty（）.html（data.html）；
})
.fail（函数（jqXHR、ajaxOptions、thrownError）
{
警报（“服务器无响应”）；
});
返回false；
});
});

@停止（）

只需使用此

$(document).on('click', '.pagination a', function(){
//your code
});

分期付款

$(".pagination a").click(function(){
//your code
});

就用这个

$(document).on('click', '.pagination a', function(){
//your code
});

分期付款

$(".pagination a").click(function(){
//your code
});

就用这个

$(document).on('click', '.pagination a', function(){
//your code
});

分期付款

$(".pagination a").click(function(){
//your code
});

就用这个

$(document).on('click', '.pagination a', function(){
//your code
});

分期付款

$(".pagination a").click(function(){
//your code
});

代表