1. 首页
  2. 问题列表
  3. 升级到JQuery 3.5.1后字段中断
提问者：小点点

升级到JQuery 3.5.1后字段中断


我有一个表，它是使用javascript根据列表中的内容创建的。 这在jQuery3.4中很好用，但是当我升级到3.5时，我看到了这个问题。

HTML

    <h5>Questions</h5>
    <table id="questionTable" class="table q">
        <thead>
        </thead>
        <tbody id="qTable"></tbody>
    </table>
    
    <div id="questionDiv">
        <input type="button" value="Add Question" onclick="AddNewQuestion()" class="btn btn-primary"/>
    </div>
    
    <hr />

<div id="questionDiv">
    <input type="submit" value="Submit" class="btn btn-primary" />
</div>

JavaScript

 <script type="text/javascript">
    
            $(document).ready(function () {
                $(function () {
                    AddCurrentQuestions();
                });
            });
    
            var table = document.getElementById("qTable");
            var rowCount = table.rows.length;
            var counter = rowCount.length;
    
            function AddCurrentQuestions() {
    
                var status = @Html.Raw(Json.Encode(Model.isNull));
    
                if (status == false) {
    
                    @{ Model.QuestionList.Add(new Performance_Planning.ViewModel.QuestionViewModel.Questions());}
                    var questionItems = JSON.parse('@Html.Raw(Json.Encode(@Model.QuestionList))');
    
                    for (var i = 0; i < questionItems.length - 1; i++) {
                        var qItem = questionItems[i];
                        var questionDetail = qItem.Question;
    
                        //Create fields
                        var qTextCell = "<td><textarea id='QuestionList_" + i + "_Question' name='QuestionList[" + i + "].Question' class='Questions' /></td>";
                        var indexCell = "<td style='display:none'> <input name='QuestionList.Index' type='hidden' value='" + i + "' /></td>";
                        var removeCell = "<td align='center'><input id='btnDelLine'" + i + "type='button' value='Remove' onclick=\"removeRow('" + i + "')\" class='btn btn-primary' /></td>";
    
                        var newRow = "<tr id='qLineItem" + i + "'>" + indexCell + qTextCell + removeCell + "</tr>";
    
                        //Add row to table
                        $('#qTable').append(newRow);
    
                        //Add Values
                        $('#QuestionList_' + i + "_Question").val(questionDetail)
    
    
                        counter = i;
                    };
                } else {
                    counter = 0;
                    AddNewQuestion();
                }
            };
    
            function AddNewQuestion() {
                @{ Model.QuestionList.Add(new Performance_Planning.ViewModel.QuestionViewModel.Questions());}
    
                counter++;
    
                //Create field
                var indexCell = "<td style='display:none'> <input name='QuestionList.Index' type='hidden' value='" + counter + "' /></td>";
                var qTextCell = "<td><textarea id='QuestionList_" + counter + "_Question' name='QuestionList[" + counter + "].Question' class='Questions' /></td>";
                var removeCell = "<td align='center'><input id='btnDelLine'" + counter + "type='button' value='Remove' onclick=\"removeRow('" + counter + "')\" class='btn btn-primary' /></td>";
    
                var newRow = "<tr id='qLineItem" + counter + "'>" + indexCell + qTextCell + removeCell + "</tr>";
    
                $('#qTable').append(newRow);
            };
    
            function removeRow(id) {
                var rowId = "qLineItem" + id;
                var row = document.getElementById(rowId);
                row.parentNode.removeChild(row);
            };
    
        </script>
        
        }

我最后看到的是，remove按钮在3.5.1中被视为文本，但在3.4中却没有出现这种情况。 我不确定如何解决这个问题，或者我是否需要找出另一种方式来写这一页。

当我查看网页并检查字段时，我看到它执行以下操作:

<textarea id="QuestionList_0_Question" name="QuestionList[0].Question" class="Questions">
  "</td><td align='center'><input id='btnDelLine'0type='button' value='Remove' onclick="removeRow('0')" class='btn btn-primary' /></td></tr></tbody></table>"

共1个答案

匿名用户

textarea元素应该有一个单独的结束标记。 不允许自关闭。 因此这不是有效的HTML: