laravel - JQuery on click event works just one time -

laravel - JQuery on click event works just one time -

i'm having problem click event on paginate bar. run 1 time. example:

i have create paginated view using laravel.i'm trying when user clicks on paginate numbers, empty container div , add together new html using jquery ajax call. user clicks first time on paginate numbers works fine, user clicks number page refresh. want add together content without refreshing.

i followed link first reply : how can utilize laravel pagination ajax (jquery)?

here code :

on search controller

$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(); homecoming response::json(array('html' => $html)); } homecoming view::make('search',compact('vehicles')) ->with('page','stock');

on vehicle-list partial view

@foreach($vehicles $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 server'); }); homecoming false; }); }); </script> @stop()

on search view

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

i think problem click event not working after returned info set div, tried lot of things can't find thing. please help me out.

i got reply through wolfs' answer. have utilize delegate click event situation , used next code , works fine..

@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 server'); }); homecoming false; }); }); </script>

@stop()

jquery laravel laravel-4 laravel-paginate