我需要另一只眼睛：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");
});

謝謝大家引導我朝正確的方向前進！