javascript - Html.TextBoxFor 由库添加时不呈现

Question

我目前正在工作中处理一个网站。到目前为止一切正常，除非我将一个函数移动到一个库以便它可以重用。

该函数是一组两个单选按钮的单击事件。单击"is"按钮时，需要出现一个文本框及其标签。单击“否”按钮时，它们需要消失。

标签在"is"点击时显示得很好。整个功能在页面本身上完美运行。但是，当我将脚本移动到库中以便在项目中重用时，文本框不再出现。我尝试换成输入标签，结果相似。

相关的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>')

它会做到这一点。

从您的评论来看，您似乎已经意识到这一点 :-) 并且您正在取得进步。