JQuery на событии click работает только один раз

Question

У меня возникла проблема с событием click на панели paginate. Он работает один раз. Пример:

Я создал разбитый на страницу вид с помощью Laravel.I'm пытается сделать, когда пользователь нажимает на номера страниц, пуст div контейнера и добавляет новый HTML к нему, используя JQuery ajax call. Но пользователь в первый раз щелкает по номерам страниц, он работает нормально, затем пользователь нажимает другой номер, а затем обновляет страницу. Я хочу добавить контент без обновления.

Я следовал этой ссылке первый ответ: How can use Laravel Pagination with Ajax (Jquery)?

Вот мой код:

На поиск контроллера

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

Я думаю, что проблема событие щелчка не работает после того, как возвращаемые данные, установленные в DIV, я попробовал много вещей, но не может найти любую вещь. пожалуйста, помогите мне.

Answer 1

Я получил ответ через ответ Волка. Я должен использовать событие делегат щелчка для этой ситуации, и я использовал следующий код и работает отлично ..

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

Answer 2

Просто используйте этот

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

instaed из

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