Html.TextBoxFor由库添加时不进行渲染

Question

我目前正在一个网站上工作。到目前为止，一切都在工作，除了当我把一个函数移到库中以便它可以重复使用时。

该功能是一组两个单选按钮的单击事件。单击"是"按钮时，需要显示一个文本框及其标签。当单击"否"按钮时，它们需要消失。

单击"是"时，标签显示得很好。整个功能在页面上运行得非常完美。但是，当我将脚本移动到库中以在项目中进行重用时，文本框不再出现。我试过换成一个input标签，得到了类似的结果。

相关的html:

@ModelType PROJECT.Form
@Code
ViewData("Title") = "PageTitle"
Layout = "~/Views/Shared/_LayoutPage.Desktop.vbhtml"
End Code
<script>
$(function () { initFunction() })
</script>
@Using Html.BeginForm("Process", "Home")
@Html.AntiForgeryToken()
@Html.Hidden("page", 4)
@<div id="formColumn" class="grid_19 alpha">
<h3>Process Title</h3>
<fieldset>
<legend>Page Title</legend>
<ol class="grid_18 push_1">
//a couple yes/no questions here, works fine
<li><label>Question 3</label></li>
<li>
<ol id="appendHere"class="horizontalList clearfix">
<li><label>Yes</label></li>
<li>@Html.RadioButtonFor(Function(a) a.Q3Radio, True)</li>
<li><label>No</label></li>
<li>@Html.RadioButtonFor(Function(a) a.Q3Radio, False)</li>
</ol>
</li>
//more working stuff
</ol>
<div class="clear"></div> 
<button name="submit" id="submit" value="submit" class="push_1">Submit</button>
<button name="cancel" id="cancel" value="cancel" class="push_1">Cancel</button>
<button name="back" id="back" value="back" class="push_1">Back</button>
</fieldset>
</div>
End Using

javascript：

function initFunction() {
$(function () { $("input[name=Q3Radio]").click(function () { handleQ3Check(this) }) })
var check = true
function handleQ3Check(elem) {
if (elem.value == "True") {
if (check) {
$('#appendHere').append('<li class="appended"><label>Amount: $</label></li><li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')
$(function () { $("input[name=appendAmount]").blur(function () { handleFees(this, 'stuff') }) })
check = false
}
} else {
var appendedInput = $('.appended')
if (appendedInput != null) {
handleFees(appendedInput, 'stuff')
$(appendedInput).remove()
check = true
}
}
}
}

如上所述，我尝试过用输入标签制作文本框，但没有出现。这种情况下出现的Amount: $ @Html.TextboxFor(Function(a) a.appendAmount)与此完全相同。

在我进一步尝试调试该问题时，如果有任何帮助或推动，我们将不胜感激。

Answer 1

当您将Javascript包含在同一个vbhtml文件中时，它之所以有效，是因为在将vbhtml文件发送到客户端浏览器之前对其进行了编译。通过查看源代码或在您喜爱的浏览器中使用开发人员工具/或类似工具，查看正在渲染的javascript。

当您要求javascript写出时

$('#appendHere').append('<li class="appended"><label>Amount: $</label></li>
<li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')

它将做到这一点。

从你的评论来看，你似乎已经意识到了这一点：-)并且你正在取得进展。