Question

我想在另一个div之后添加一个新的。我用下面的jquery代码：

<script type="text/javascript">

    function AddNewValidTimeEntry() {

        var html="<div class='row col-md-offset-3'> @include('Row_Modal_ValidTime',['divID'=>'rr']) </div> ";
        $( html ).insertAfter( "#FirstRowValidTime" );
    }
</script>

我的主要是：

<div id="FirstRowValidTime" class="row col-md-offset-3">

                        @include("Row_Modal_ValidTime",["divID"=>"qq"])

                        <div  class="form-group col-md-2">
                            <div class=" inputGroupContainer">
                                <div dir="ltr" class="input-group">

                                    <button onclick="AddNewValidTimeEntry();" type="button" class="btn btn-info btn-sm">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <label for="ValidTime" class="col-md-2 control-label" >زمان معتبر<span style="color: red">*</span>     </label>
                    </div><!-- row clock-->

和Row_Modal_ValidTime.blade.php是：

<div  id='{{$divID}}'>
    <div   class='form-group col-md-3'>
        <div class=' inputGroupContainer'>
            <div class='clockpicker' data-placement='left' data-align='top' data-autoclose='true'>

                <div dir='ltr' class='input-group'>
                    <input id='ValidTime' type='text' class='form-control' value='08:00'>
                    <span class='input-group-addon'>
                          <span class='glyphicon glyphicon-time'></span>
                    </span>
                </div>

            </div>
        </div>
    </div>


    <div  class='form-group col-md-4 '>
        <div class=' inputGroupContainer'>
            <div dir='ltr' class='input-group col-md-offset-1'>

                <select   style='direction: rtl;' class='form-control' id='day' name='day' required='required'>
                    <option   value='' data-hidden='true'>روز هفته</option>
                    <option value='0'>شنبه</option>
                    <option value='1'>یکشنبه</option>
                    <option value='2'>دوشنبه</option>
                    <option value='3'>سه شنبه</option>
                    <option value='4'>چهارشنبه</option>
                    <option value='5'>پنجشنبه</option>
                    <option value='6'>جمعه</option>
                </select>

                <span class='input-group-addon'>
                      <span class='glyphicon glyphicon-calendar'></span>
                </span>

            </div>
        </div>
    </div>
</div>

当我运行我的代码时，我看到我的jquery行（var html="<div class...）出现此错误：

Uncaught SyntaxError: Invalid or unexpected token

哪里错了？我必须做什么？

Answer 1

这是因为Row_Modal_ValidTime.blade.php有多行，javascript不支持多行字符串，您可以通过替换来使用模板文字：

        var html="<div class='row col-md-offset-3'> @include('Row_Modal_ValidTime',['divID'=>'rr']) </div> ";

使用：

        var html=`<div class='row col-md-offset-3'> @include('Row_Modal_ValidTime',['divID'=>'rr']) </div> `;

请注意，IE浏览器不支持此功能，请检查此功能的浏览器支持here。

Answer 2

您可以使用课程在页面准备好时隐藏div，并在按钮单击时显示

更改javascript，更改模板，如下所示：

<div id="FirstRowValidTime" class="row col-md-offset-3">
//contet
</div> 
<div class='row col-md-offset-3 hidden customH'> @include('Row_Modal_ValidTime',['divID'=>'rr']) </div>

JS：

function AddNewValidTimeEntry() {
        $('.customH').removeClass('hidden');
    }

Answer 3

我编辑publish_pages文件并删除所有换行符。

未捕获的SyntaxError：使用jquery Dom时无效或意外的令牌

3 个答案: