Question

我在我的刀片页面底部添加了javascript，jquery，允许我添加一个新行，其中包含id =＆＃34; dynamic_field＆＃34;。（但没有按钮名称＆＃34;添加＆＃34;在第二个之后，它应该是一个删除的十字架）我的问题是：如何将所有这些行放在$（＆＃39;＃dynamic_field＆＃39;）。append（.... here ....）因为我尝试复制粘贴并且每次都有语法错误..

这里是刀片文件：

@extends ('layout.layout')

@section('containerContent')



<div class="col-md-12">
    <form  method="POST" enctype="multipart/form-data" id="add_tour">
        {{ csrf_field() }}
        @if (count($errors))
            <div class="form-group">
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li> {{  $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <div class="content">
            <h1>Create a new Tour:</h1>
                <div class="form-group">
                    <div class="col-lg-6">
                        <input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-6">
                        <textarea class="form-control" placeholder="Resume of tour" name="tourResume"  rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-6">
                        <select id='nameArtist' name='nameArtist'>
                            <option value=''>Select Music Artist or Band</option>
                            @foreach ($artists  as  $artist)
                                <option  value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            <h2 align="center">Add Concert to your Tour:</h2>
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <tr>
                    <td><select id='concertRoom' name='concertRoom'>
                        <option>Select your concert room</option>
                        @foreach ($roomsconcert  as  $room)
                            <option  value="{{ $room->id }}">{{ $room->name }}</option>
                        @endforeach
                        </select>
                        </td>
                        <td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
                        <td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
                    </tr>
                </table>
            </div>
                <a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
                <button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var i = 1;
        $('#add').click(function() {
                i++;
                var htmlContent = $('#dynamic_field').html();
/*
                $('#dynamic_field').append(htmlContent);
*/

            $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');


        });

                $(document).on('click','.btn_remove',function () {
                    var button_id = $(this).attr("id");
                    $('#row'+button_id+'').remove();
                });

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });


    });
</script>
@endsection

感谢

Answer 1

尝试使用@verbatim Directive

包装您的javascript

@verbatim
    <script type="text/javascript">
    ......
    </script>
@endverbatim

在jquery中连接var以使all位于同一行

1 个答案: