Question

我正在尝试将文本区域元素（使用TextAreaFor）添加到模态体。为了示范，我有两个按钮。单击一个时，TextBoxFor元素将添加到模态体中。单击其他按钮时，将添加TextAreaFor元素。

TextBoxFor工作正常，但我在解决文本区域正确渲染方面遇到了问题。我只是JavaScript的初学者，但似乎textarea元素的结束标记导致字符串在最后的'＆gt;'之前结束已经到达。

单击按钮，添加html：

btn.onclick = function () {
$('.modal-body').html('<label>Question Label</label>@Html.TextAreaFor(c => c.Response, new { @class = "form-control" })');
modal.style.display = "block";
}

然而，这呈现为：

$('.modal-body').html('<label>Question Label/label><textarea class="form-control" cols="20" id="Response" name="Response" rows="2">X
</textarea>

使用'X'是我得到“未捕获的SyntaxError：无效或意外的令牌”错误。任何关于如何解决这个问题的建议都会非常感激。

Answer 1

您可以尝试类似

的内容

    $(document).ready(function(){
    var counter=0;
    $("#addButton").click(function () {
    
    if(counter>=5){
    alert("you can insert only 5 textareas")}
    else{
    
var newTextBoxDiv = $(document.createElement('div'))
       .attr("id", 'TextBoxDiv');

newTextBoxDiv.after().html('<label>Question Label </label>' + '<textarea rows=5 cols=50 name="textbox" id="textbox" value="" >');

  newTextBoxDiv.appendTo("#TextBoxesGroup");
  counter++;
  }
  })
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>

计数器变量是为了确保添加不超过5个textareas。

动态添加html.TextAreaFor使用JavaScript

1 个答案: