JQuery on click event works just one time

Question

I'm having a problem with the click event on paginate bar. It run one time. Example:

I have create a paginated view using Laravel.I'm trying to do when user clicks on the paginate numbers, empty the container div and add the new HTML to it using JQuery ajax call. But user clicks first time on the paginate numbers it works fine, then user clicks another number then page refresh. I want to add content without refreshing.

I followed this link first answer : [How can use Laravel Pagination with Ajax (Jquery)?][1]

Here is my 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();
    return Response::json(array('html' => $html));
}
return View::make('search',compact('vehicles')) ->with('page','STOCK');

On Vehicle-list Partial View

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

On Search View

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

I think the problem is the click event not working after the returned data set to the div, I tried lot of things but can't find any thing. please help me out.

Answer 1

Just use this

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

instaed of

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

Answer 2

I got the answer through Wolfs' answer. I have to use delegate click event for this situation and I used following Code and 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 from server');
        });
        return false;
    });
});
  </script>

@stop()