我需要另一只眼睛：MVC中的jQuery无法正常工作

Question

我正在尝试构建一个MVC表单，在该表单中，当页面加载时，电话号码的输入将显示为“（）___-____”。 我正在尝试使用Digital Bush的遮罩插件 。 到目前为止，页面加载时尚未显示。 我究竟做错了什么？ 我已经看了好几个小时了，看不到它。 到目前为止，这是我所做的：

首先，这是我的MVC模型中的内容：

    [Required]
    [Display(Name = "Home Phone Number")]
    public string Buy1HomePhone { get; set; }

    [Required]
    [Display(Name = "Cell Phone Number")]
    public string Buy1CellPhone { get; set; }

1.）我从Digital Bush取得了源代码，并将其粘贴到一个名为maskedinput.js的javascript文件中

2.）在maskedinput.js中，我添加了以下代码：

$(document).ready(function () {
$('#phone').mask("(999) 999-9999");});

3.）我在电话号码输入框中添加了以下id标签：

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1HomePhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1CellPhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

4.）我在视图中的脚本中添加了maskedinput.js：

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/CarrieJQueryTest.js")
@Scripts.Render("~/Scripts/maskedinput.js")}

Answer 1

我认为您需要在input元素而不是div上初始化掩码。 另外，由于您有2个，因此应将其设为类而不是ID（即<div class="col-md-10" class="phone"> ）

像这样：

$(document).ready(function () {
$('.phone input').mask("(999) 999-9999");});

Answer 2

您正在对ID为“ phone”的元素制作遮罩：

$('#phone').mask("(999) 999-9999");});

但是这个元素是一个div 。

<div class="col-md-10" id="phone">

只需将遮罩放在输入元素上。 这是您的解决方案：

$('#phone .form-control').mask("(999) 999-9999");});

只要“ form-control”是您为电话号码元素提供的课程即可。

您应该考虑给它一个更具体的类，以确保不会将蒙版应用于其他不需要的元素。

Answer 3

我修好了它！ 我不明白为什么这是解决方法，但确实如此。 这是我的新代码：

在视图中...

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1HomePhone, new { id = "applicantHomePhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1CellPhone, new { id = "applicantCellPhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

我最终将EditorFor更改为TextBoxFor，然后为jQuery添加一个ID以识别它。 我尝试做多个类，但是Visual Studio不满意。 我还尝试在每个TextBoxFor上执行相同的ID，但这没有用。 只有第一个带有id标签的输入框才显示jQuery。 因此，在找到更有效的方法之前，我将为页面上的每个电话号码创建唯一的id标签。

这是我的jQuery的样子：

$(document).ready(function () {
    $('#applicantHomePhone').mask("(999) 999-9999");
    $('#applicantCellPhone').mask("(999) 999-9999");
});

谢谢大家引导我朝正确的方向前进！