Question

通过单击行1.在“研究所名称”中，该研究所的实验室以正确的大小显示。因此，每当我单击该系统时，都会在右侧显示Labs。因此，如果单击“编辑”或“删除”按钮，则“实验室”选项卡将继续弹出，并在几秒钟后打开研究所的“编辑”选项卡。有任何想法吗？

@section('javascript')
<script>
    var laboratories = '{{htmlspecialchars(json_encode($laboratories), ENT_QUOTES, 'UTF-8')}}';
    laboratories = laboratories.replace( /&quot;/g, '"' );
    laboratories = JSON.parse(laboratories);
    // console.log(laboratories);
    function getLaboratories(id)
    {
        $("table#laboratories").empty();
        var table = "<tr>" +
            "<th>ID</th>" +
            "<th>{{ __('Laboratory\'s Name') }}</th>" +
            "<th>{{ __('Laboratory\'s Acronym') }}</th>" +
            "<th>{{ __('Actions') }} </th>" +
            "</tr>";
        for(var i=0; i<laboratories[id].length; i++)
        {
            table += '<tr><td>'+id+'.'+(i + 1)+'</td><td>'+laboratories[id][i].name+'</td><td>'+laboratories[id][i].acronym+'</td>';
            table += '<td><a alt="{{ __('Delete Laboratory')}}" title="{{ __('Edit Laboratory')}}" class="btn btn-sm btn-default" href="laboratories/'+laboratories[id][i].id+'/edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +
                '<form action="laboratories/delete/'+laboratories[id][i].id+'/" method="post" class="form-delete2">{{csrf_field()}}{{method_field('DELETE')}}'+
                '<button alt="{{ __('Delete Laboratory')}}" title="{{ __('Delete Laboratory')}}" class="btn btn-sm btn-default delete" id="delete_modal2" name="delete_modal2"><span class="glyphicon glyphicon-trash"></span></button></form></td></tr>';
        }
        $("table#laboratories").append(table);

        // EXTRA
        var href = $("#create_lab").attr('href');
        // console.log(href);
        let positiion = href.search("institute_id");
        href = href.substring(0,positiion)+"institute_id="+id;
        // console.log(href);
        $("#create_lab").attr('href', href)
        $("#create_lab").attr('disabled', false);
    }
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a href="{{route('institutes.create')}}" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> {{ __('Create New Institute') }}</a>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" data-toggle="dataTable" data-form="deleteForm">
                           <tr>
                               <th>ID</th>
                               <th>{{ __('Institute\'s Name') }}</th>
                               <th>{{ __('Institute\'s Acronym') }}</th>
                               <th>{{ __('Actions') }}</th>
                           </tr>
                            @if(count($institutes) > 0)
                                @foreach($institutes as $institute)
                                    <tr onclick="getLaboratories({{$institute->id}});">
                                        <td>{{$institute->id}}</td>
                                        <td>{{$institute->name}}</td>
                                        <td>{{$institute->acronym}}</td>
                                        <td>
                                            <a alt="{{ __('Edit Institute')}}"title=" {{ __('Edit Institute')}}" class="btn btn-sm btn-default" href="{{route('institutes.edit', $institute->id)}}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                            <form action="{{route('institutes.destroy', $institute->id)}}" method="post" class="form-delete">
                                                {{csrf_field()}}
                                                {{method_field('DELETE')}}
                                                <button alt="{{ __('Delete Institute')}}" title="{{ __('Delete Institute')}}" class="btn btn-sm btn-default delete" id="delete_modal" name="delete_modal">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td>{{ __('There are no institutes available.') }}</td>
                                </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
     </div>

Answer 1

无论如何，我怀疑这是一个JavaScript问题，而不是php / laravel问题：在您称为“ stopPropagation”的按钮的点击处理程序上，以停止按钮上的点击事件冒泡，以触发该行上的点击事件。发生的事情是，单击按钮也就是单击行，因此对两者都做出反应。

请参见以下示例html：

<table>
<tr><td>the row<td> <span ><input type="button" value="I am a button"/>           </span></td></td></tr>
</table>

<div id="messages">

</div>

和此javascript：

$('tr').on('click', function(){
    $('#messages').append('<div>You clicked the row</div>')
})

$('span').on('click', function(e){

$('#messages').append('<div>You click the button</div>')
})

如您所见。当您单击该按钮时，它会同时触发该按钮和该行的事件。

如果您要这样做：

$('tr').on('click', function(){
    $('#messages').append('<div>You clicked the row</div>')
})

$('span').on('click', function(e){
e.stopPropagation();
$('#messages').append('<div>You click the button</div>')
})

（请注意'e.stopProgration（）;'），它将仅触发该按钮的事件。

如何在不禁用操作按钮的情况下禁用列？

1 个答案: