Question

我无法使用AJAX从局部视图Laravel访问javascript加载更多分页。通过局部视图加载更多ajax而创建的视图无法访问btn-vote点击功能。

这是我的简单代码：

index.blade.php

@extends('layout')

@section('content')
  <div class="list-group" id="result"> 
    @include('dataview')
  </div>
@endsection

@section('js')
<script type="text/javascript">
$(document).ready(function() {
  function loadmore() {
    // doing load more data if end of page/page++
    // ajax to load data
    // return partial view 'dataview' with data from API
    // append to div id="result"
  }
  $('.btn-vote').off('click').on('click', function(e) {
      // button click and do ajax thing
      // return data
  });
});  
@endsection

我的dataview.blade.php

@foreach($datas as $data)
<a href="#" class="list-group-item list-group-item-action">
  <div style="float: right;">
    <button type="button" class="btn btn-sm btn-vote" data-id={{$data->id}}>
      Vote | {{$data->count}}
    </button>
  </div>
</a>
@endforeach

这是我的ajax控制器，用于加载更多数据并创建部分dataview

public function load(Request $request) {
  $datas = Post::paginate(15);
   if ($request->ajax()) {
        $view = view('data',compact('datas'))->render();
        return response()->json(['html'=>$view]);
    }
  return view('index', compact('datas'));
}

Answer 1

那是因为绑定click事件的脚本已加载到页面上，它不知道btn-vote类的新按钮。将按钮放入DOM后，您需要对其进行绑定。将点击事件代码包装到在初始页面加载时以及每次loadmore之后调用的函数中：

$(document).ready(function() {
  function loadmore() {
    // doing load more data if end of page/page++
    // ajax to load data
    // return partial view 'dataview' with data from API
    // append to div id="result"
    bindButtons()
  }

  function bindButtons () {
      $('.btn-vote').off('click').on('click', function(e) {
          // button click and do ajax thing
          // return data
      });
  }

  bindButtons()
});

Answer 2

位于文档就绪块下面的所有内容都将网页上的HTML元素与其各自的事件处理程序绑定在一起。新添加或动态生成的HTML元素本身不会自动绑定到首次加载网页时在文档就绪块中首先执行的事件处理程序。

unshare(CLONE_FILES)

为应对这种情况，我们在JQuery中使用事件绑定的方式略有不同，如下所述：

$(document).ready(function() {

   //event bindings 

)}

通过这种方式，新添加或动态生成的HTML元素会自动自动绑定到其各自的事件处理程序。

无法从部分视图Laravel

2 个答案: