无法从部分视图 Laravel 访问 javascript答案

【问题标题】：Can't access javascript from partial view Laravel无法从部分视图 Laravel 访问 javascript
【发布时间】：2018-12-30 00:24:37
【问题描述】：

我无法使用 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 控制器，用于加载更多数据并创建部分数据视图

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'));
}

【问题讨论】：

[已解决] 使用 $('#results').off('click').on('click','.btn-vote', function(e) {});而不是在上面
我们在这里不做“已解决”的事情。只需接受解决问题的答案，页面会将其标记为已回答
请阅读How does accepting an answer work?。不要将“已解决”一词编辑到问题中。

标签： javascript php ajax laravel

【解决方案1】：

这是因为您的绑定点击事件的脚本已经加载到页面上，它不知道带有btn-vote 类的新按钮。您需要在按钮位于 DOM 后绑定它们。将 click 事件代码包装在一个函数中，该函数在初始页面加载时和每个 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()
});

【讨论】：

感谢@DigitalDrifter！我也会尝试使用您的解决方案。 [已解决]

【解决方案2】：

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

$(document).ready(function() {

   //event bindings 

)}

为了应对这种情况，我们在 JQuery 中使用了稍微不同的事件绑定，如下所述：

$(document).on('click', '.btn-vote', function(e){

   //event handling goes here

});

这样，新添加或动态生成的 HTML 元素会自动绑定到各自的事件处理程序。

【讨论】：