Jquery 函数在局部视图上不起作用答案

【问题标题】：Jquery function doesn't work on partial viewJquery 函数在局部视图上不起作用
【发布时间】：2020-08-04 00:38:31
【问题描述】：

我正在 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 上工作？

【问题讨论】：

如果您尝试向新添加的元素添加事件侦听器，则必须在添加元素或使用事件委托后这样做
@Patrick Evans 对不起，我不明白你的意思
@PatrickEvans 的意思是在页面加载的那一刻，监听器被添加到 DOM 元素中。如果您动态添加新内容并且您也希望在它们上面有听众，那么这将行不通。您可以通过将 jQuery 添加到要添加的部分来规避此问题。显然不是功能。 $('#search').keyup(...) 创建一个监听器。将相同的代码添加到刀片页面底部的部分。不要推它，只需添加它。我已经做过很多次了。因为它是 JavaScript，所以它不会产生悖论。如果您询问生成的源，if 可能看起来有点奇怪。

标签： javascript jquery ajax laravel

【解决方案1】：

这应该是您的部分（仅当您通过 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>

【讨论】：