title: JQuery on click event works just one time
body: <p>I'm having a problem with the click event on paginate bar. It run one time. Example:</p>
  
  <p>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 <code>HTML</code> to it using <code>JQuery</code> <code>ajax</code> 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.</p>
  
  <p>I followed this link first answer : [How can use Laravel Pagination with Ajax <code>(Jquery)?][1]</code></p>
  
  <p>Here is my code : </p>
  
  <p><strong>On Search Controller</strong></p>
  
  <pre><code>$vehicles = Vehicle::has('image')-&gt;orderBy('vehicles.stockNo', 'desc')-&gt;paginate(6);
  if(Request::ajax())
  {
      $html = View::make('templates.partials.vehicle-list',compact('vehicles'))
                  -&gt;with('page','STOCK')-&gt;render();
      return Response::json(array('html' =&gt; $html));
  }
  return View::make('search',compact('vehicles')) -&gt;with('page','STOCK');
  </code></pre>
  
  <p><strong>On Vehicle-list Partial View</strong></p>
  
  <pre><code>@foreach($vehicles as $vehicle)
      &lt;div class="col-md-12 search-vehicle-list-item"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="search-vehicle-title h4 col-md-12"&gt;{{ $vehicle-&gt;name . " " . $vehicle-&gt;registerYear }}&lt;/div&gt;
              &lt;div class="search-vehicle-short-description h6 col-md-12"&gt;
                  @if(strlen($vehicle-&gt;details) &gt; 250)
                      substr( {{ $vehicle-&gt;details }}, 0, 250)
                  @else
                      {{ $vehicle-&gt;details }}
                  @endif
              &lt;/div&gt;
              &lt;div class="search-vehicle-short-other h6 col-md-12"&gt;
                  &lt;div class="col-md-4"&gt;{{ $vehicle-&gt;milage }} KM&lt;/div&gt;
                  &lt;div class="col-md-4"&gt;{{ $vehicle-&gt;registerYear }} &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;{{ $vehicle-&gt;price }} JPY&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      @endforeach
  
      {{ $vehicles-&gt;links() }}
  
      @section('scripts')
        &lt;script type="text/javascript"&gt;
            $(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;
              });
          });
        &lt;/script&gt;
      @stop()
  </code></pre>
  
  <p><strong>On Search View</strong> </p>
  
  <pre><code>    &lt;div class="col-md-12 vehicle-listing" id="vehicleList"&gt;
          @include('templates.partials.vehicle-list')
      &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>