Question

我有一个Laravel项目，在这里我使用插件dataTable来呈现项目集合。

    $('#paths').DataTable();

所以我写了一些脚本，允许用户编辑他们的记录，并在同一页上包含一个模式：

     $(document).ready(function(e) {
                $(function() {
                $('.editPathButton').on("click", function () {

                    id=$(this).parent().siblings('#path_id').html();
                    nome=$(this).parent().siblings('#path_nome').html();
                    degreeCourses_id=$(this).parent().siblings('#path_degreeCourse_id').val();

                    console.log(id+nome+degreeCourses_id);

                    $('#pathId_edit').val(id);
                    $("#nome_edit").html(nome);
                    $('#degreeCourses_id_edit').val(degreeCourses_id);
                });

});

对于表的第一个“页面”，一切正常（甚至仅是console.log），但是如果我选择查看的范围超过“标准”行，或者我切换了（表的）页面，脚本停止工作，但仍在同一HTML页面上，并且表的每个记录的ID和类都相同！而且脚本仍在DOM上

视图：

表格部分

 <table id="paths" class="table table-responsive table-hover text-center">
                        <thead>
                        <tr class="intestazione">
                            <td>Id</td>
                            <td>Nome</td>
                            <td>Corso di Laurea</td>
                            <td>Edit</td>
                            <td>Delete</td>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($paths as $path)
                                <tr>
                                    <td id="path_id">{{$path->id}}</td>
                                    <td id="path_nome">{{$path->nome}}</td>
                                    <td id="path_degreeCourse">{{$path->degreeCourse->nome}}</td>
                <input type="hidden" id="path_degreeCourse_id" value="{{$path->degreeCourse->id}}">


                                    <td>
                                      <button id="edit_path" class="btn btn-warning editPathButton"
                                                    data-toggle="modal"
                                                    data-target="#editPathModal">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                        </td>

                                </tr>
                        @endforeach
                        </tbody>
</table>

模式：

<div class="modal fade" id="editPathModal"
         tabindex="-1" role="dialog"
         aria-labelledby="favoritesModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"
                        id="editPathModalLabel">Modifica Indirizzo</h4>
                </div>
                <div class="modal-body">
                    {!! Form::open(['url' => 'admin/lauree', 'method' => 'put']) !!}
                    {{ Form::hidden('pathId_edit','', array('id' => 'pathId_edit')) }}
                    <div class="form-group col-md-12">
                        <div class="form-group col-md-6">
                            <label for="name">Nome</label>
                            {{ Form::text('nome_edit', '', array('class' => 'form-control','id'=>'nome_edit')) }}
                            @if($errors->edit_path->has('nome_edit'))
                                @foreach($errors->edit_path->get('nome_edit') as $msg)
                                    <span class="label label-danger error_mex">{{$msg}}</span>
                                @endforeach
                            @endif
                        </div>
                        <div class="form-group col-md-6">
                            <label for="degreeCourses_id">Corso di Laurea</label>
                            {{ Form::select('degreeCourses_id_edit', $degreeCourses, null, array('class' => 'form-control')) }}
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        <button type="submit" class="btn btn-success">Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    </div>
                    {!! Form::close() !!}
                </div>

Answer 1

我找到了原因以及解决方法！

问题在于如何呈现记录以及如何设置“ onclick”侦听器。在第一个页面N记录的第一次呈现时，DOM包含用于在每个记录/按钮上设置侦听器的脚本；

当您转到N + 1记录时，DOM是相同的，但是没有重新加载页面，因此不再为此和其他所有操作设置listerner ...

因此，最简单的解决方案是将侦听器移动到按钮内部，并编写一个函数来调用以设置模式数据。

因此按钮将是：

<button id="edit_path" 
        class="btn btn-warning editPathButton"
        data-toggle="modal"
        onclick="editPath(this)"
        data-target="#editPathModal">
        <i class="fa fa-edit"></i>
</button>

和功能：

 function editPath(el) {
            id=$(el).parent().siblings('#path_id').html();
            nome=$(el).parent().siblings('#path_nome').html();
            degreeCourses_id=$(el).parent().siblings('#path_degreeCourse_id').val();

            console.log(id+nome+degreeCourses_id);



            $('#pathId_edit').val(id);
            $("#nome_edit").val(nome);
            $('#degreeCourses_id_edit').html(degreeCourses_id);     
        }

dataTable和编辑在刀片服务器上不起作用

1 个答案: