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

【问题标题】：Uncaught SyntaxError: Invalid or unexpected token when use jquery Dom未捕获的 SyntaxError：使用 jquery Dom 时令牌无效或意外
【发布时间】：2017-05-02 00:10:21
【问题描述】：

我想在另一个 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 是：

<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

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

【问题讨论】：

@NewbeeDev，你能告诉我更多细节吗？
你可以制作 jsfiddle 以便我们看到实时错误吗？
@include('Row_Modal_ValidTime',['divID'=>'rr']) 的输出是什么？
发生错误是因为包含创建了一个新行，其中 javascript 严格不允许新行
@narges 也许你修剪你的变量html 会解决这个问题

标签： php jquery html dom laravel-5.3

【解决方案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。

【讨论】：

当我替换它时，我看到新错误 "Uncaught SyntaxError: Unexpected token " of Row_Modal_ValidTime 文件

【解决方案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');
    }

【讨论】：

我想在每次点击按钮时添加新的 div。但这个解决方案只为我显示一个 div。

【解决方案3】：

我编辑Row_Modal_ValidTime.blade.php 文件并删除所有换行符。

【讨论】：