laravel Javascript 和渲染部分答案

【问题标题】：laravel Javascript and Render sectionslaravel Javascript 和渲染部分
【发布时间】：2020-09-18 17:09:30
【问题描述】：

嗨，我用 laravel 做了一个 webapp，有各种形式，可以将数据添加到数据库，然后只刷新一些部分（例如插入订单，然后插入一些产品......等等），但是当部分呈现 javascript 时不会工作了。我有一些 Jquery 可以捕捉到一些事件……例如一些点击按钮。示例

HEAD 中的部分脚本

    <script src="{{ asset('public/js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ asset('public/js/vendor/popper.min.js') }}"></script>
    <script src="{{ asset('public/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('public/js/vendor/holder.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function(){

            $(document).ajaxSend(function() {
            $("#overlay").fadeIn(300);　
            });

            $('#searchPolizza').keydown(function (e) {
              if (e.keyCode == 13) {
              e.preventDefault();
              $value=$(this).val();
                $.ajax({
                    type : 'get',
                    url : "{{ url("/trova") }}",
                    data:{'numero':$value},
                    success:function(data){
                    $('#RefreshContent').replaceWith(data);
                    //initRefundsFunctions();
                    //initDossierListClick();
                    }
                });
              }
            });

$( "#addDossier" ).click(function( event ) {
          event.preventDefault();

          //$("#addDossierForm")[0].reset();
          var r = confirm("Vuoi veramente creare un nuovo dossier?");
            if (r == true) {
                       ....continue.......</script>

在我找到一个调用 ajax '#searchPolizza' 的“polizza”之后，我刷新了内容部分

RefreshContent 部分的一部分，其中我有一个带有按钮#addDossier 的表单，我可以在与第一次搜索相关的刷新部分后按下该按钮

<div class="" style="zoom:90%">
  <form class="form-inline" id="addDossierForm"> 
    <input type="text" class="form-control mb-2 mr-sm-2" placeholder="dossier" id="dossier">
    <input type="date" class="form-control mb-2 mr-sm-2" placeholder="data sinitro" id="date_cla">
  <button type="submit" class="btn btn-primary mb-2" data-customer_id="@isset($customer_id){{$customer_id}}@endisset" id="addDossier"><i class="fa fa-plus" aria-hidden="true"></i></button>
  </form>
</div>

但是 jquery 无法再捕获点击事件

我尝试将所有脚本放在头部，或者创建函数来调用，但效果不佳。还有其他解决方案吗？谢谢

【问题讨论】：

您是否使用 ajax 请求来更新这些部分？也许您正在以脚本无法跟踪的方式更改 DOM。你应该使用像 VueJs 这样的东西，它会动态更新 DOM。
我插入了部分代码....是的，我使用 ajax....

标签： javascript laravel rendering

【解决方案1】：

这里，$(dom).click() 静态绑定事件，你应该尝试像这样注册你的点击事件函数：

$( '#addDossier' ).on( 'click', function (event) { your code});

动态绑定事件处理程序check that out here，你可以使用简写(function(){..})();而不是$(document).ready(function(){...});，你应该考虑使用像Vue/React这样的现代东西。 Jquery 很原始而且越来越老了。

【讨论】：