Jquery функция не работает при частичном просмотре

Question

Я делаю функцию поиска в реальном времени, используя ajax на laravel 7, и по большей части она работает нормально. Однако у меня есть кнопка, которая отключает функции вывода поиска. Когда страница загружается впервые, функции успешно отключаются. Но когда я запускаю поиск в реальном времени, функция вывода снова включается. Я предполагаю, что это потому, что результат поиска в реальном времени берется из частичного представления / 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?

Answer 1

Это должно быть ваше частичное (работает, только если вы добавляете его через ajax запросы). Он добавит нужных слушателей даже после полной загрузки DOM в первый раз. Повторный запуск той же части jQuery восстановит sh слушателей, которых вы ожидаете.

<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>