点击事件上的 JQuery 只工作一次

Posted 2023-03-14

【中文标题】点击事件上的 JQuery 只工作一次

【英文标题】：JQuery on click event works just one time

【发布时间】：2015-01-05 03:54:22

【问题描述】：

我遇到了分页栏上的点击事件的问题。它运行一次。示例：

我已经使用 Laravel 创建了一个分页视图。我正在尝试在用户单击分页数字时执行此操作，清空容器 div 并使用 JQuery ajax 调用将新的 html 添加到其中。但是用户第一次点击它工作正常的分页数字，然后用户点击另一个数字然后页面刷新。我想在不刷新的情况下添加内容。

我按照这个链接第一个回答：[How can use Laravel Pagination with 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()

在搜索视图中

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

我认为问题是返回数据集到div后点击事件不起作用，我尝试了很多东西但找不到任何东西。请帮帮我。

【问题讨论】：

将点击事件委托给#vehicleList级别learn.jquery.com/events/event-delegation$('#vehicleList').on('click', '.abc', function()...);

感谢您的快速回复。为什么要选择车辆列表？当用户点击分页号时，我需要清除 div 并添加内容吗？

谢谢我找到了答案。

【参考方案1】：

就用这个

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

代替

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

【参考方案2】：

我通过 Wolfs 的回答得到了答案。对于这种情况，我必须使用委托单击事件，并且我使用了以下代码并且工作正常..

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