时间戳

首页 > 解决方案 > Jquery 函数在局部视图上不起作用

javascript - Jquery 函数在局部视图上不起作用

问题描述

我正在 laravel 7 上使用 ajax 制作实时搜索功能，它在大多数情况下都可以正常工作。但是，我有一个按钮可以禁用搜索输出的功能。首次加载页面时，功能已成功禁用。但是当我运行实时搜索时，输出的功能再次启用。我猜是因为实时搜索输出取自部分视图/html，然后加载到主视图/html。该函数在页面加载后运行没有任何问题，因为 DOM 已经加载了它。当我附加一个新的视图/html 时，DOM 无法识别它。

这是ajax代码

function fetch_data(page, query){
    $.ajax({
        url:"/search?query="+query+"&page="+page,
        success:function(data){
            $('#product-container').html('');
            $('#product-container').html(data);
        }
    });
}
$('#search').keyup(delay(function(){
    var query = $('#search').val();
    var page = $('#hidden_page').val();
    fetch_data(page, query);
}, 400));

这是部分视图

<div class="row">
  @if(count($products) < 1)
  <div class="col-md-12 text-center">
    <h5>No results</h5>
  </div>
  @endif
  @foreach($products as $product)
  <div class="col-md-3" id="item">
    <div class="product__item p-2" style="background: #dce0e2;">
      <div class="thumbnail">
        <img src="{{ asset('img/products/'. $product->image) }}">
      </div>
      <div class="product__item__text">
        <h6 style=" white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $product->name }}</h6>
        <h5>{{ rupiah($product->price) }}</h5>
      </div>
      <a href="{{ route('kasir.add.item', ['product_id' => $product->id]) }}" class="add-btn" id="{{ $product->id }}">
        <div class="btn-success text-center m-2 p-1">
          Add +
        </div>
      </a>
    </div>
  </div>
  @endforeach
</div>
{{ $products->links('partials.pagination') }}

这是控制器

public function search(Request $request){
    if ($request->ajax()) {
      $query = $request->get('query');
      $query = str_replace(" ", "%", $query);
      $products = Product::orderBy('name', 'ASC')->where('name', 'LIKE', '%'.$query."%")->paginate(8);
      return view('kasir.product_data', compact('products'))->render();
    }
  }

我的问题是 DOM 是否可以像加载页面一样加载部分视图，以便 jquery 函数可以在新视图/html 上工作？

标签： javascriptjqueryajaxlaravel

解决方案

这应该是您的部分（仅当您通过 ajax 请求添加它时才有效）。即使在第一次完全加载 DOM 之后，它也会添加您想要的侦听器。重新运行同一段 jQuery 将重新建立您所期望的侦听器。

<div class="row">
  ....
</div>
{{ $products->links('partials.pagination') }}

<script>
$('#search').keyup(delay(function(){
var query = $('#search').val();
var page = $('#hidden_page').val();
    fetch_data(page, query);
}, 400));
</script>

推荐阅读