这是MVC 3剃刀视图的一部分。我在表单上有几个editorfor框,想要添加一些jquery以增强表单的鲁棒性。但是我遇到了一个奇怪的错误,对我来说这没有意义。

首先让我们看一下视图。

<link type="text/css" rel="stylesheet" href="/content/jquery-ui-1.8.16.custom.css"/>
<link type="text/css" rel="stylesheet" href="/content/site9.css"/>
<link rel="stylesheet" href="@Url.Content("~/jqwidgets/styles/jqx.base.css")" type="text/css" />
<link rel="stylesheet" href="@Url.Content("~/jqwidgets/styles/jqx.darkblue.css")" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/jqxcore.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/jqxvalidator.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/globalization/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/jqxmaskedinput.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/jqxinput.js")" type="text/javascript"></script>
<script src="@Url.Content("~/jqwidgets/gettheme.js")" type="text/javascript"></script>


<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $('#date_paid').datepicker();
    $("#first_name").jqxInput({ placeHolder: "First Name", width: 200, height: 25, theme: 'darkblue' });
    $("#last_name").jqxInput({ placeHolder: "Last Name", width: 200, height: 25, theme: 'darkblue' });
    $("#middle_initial").jqxInput({ placeHolder: "Middle Initial", width: 150, height: 25, theme: 'darkblue' });
    $("#zip_code").jqxmaskedinput({ mask: '#####-####', width: 150, height: 25, theme: 'darkblue' });

});




<div class="editor-label">
        <label>First Name</label>
        @Html.EditorFor(Function(model) model.first_name)
        @Html.ValidationMessage("first_name", "*")

       <label class="small_spacing">Middle Initial</label>
        @Html.EditorFor(Function(model) model.middle_initial)
        @Html.ValidationMessage("middle_initial", "*")

       <label class="small_spacing">Last Name</label>
        @Html.EditorFor(Function(model) model.last_name)
        @Html.ValidationMessage("last_name", "*")
    </div>
         <div class="editor-label">
    <label>City</label>
        @Html.EditorFor(Function(model) model.city)
        @Html.ValidationMessage("city", "*")

    <label class="spacing">State</label>
      @Html.DropDownListFor(Function(model) model.State, New SelectList(ViewBag.states), New With {.class = "StateDrop"})
        @Html.ValidationMessageFor(Function(model)model.State)

    <label class="small_spacing">Zip Code</label>
        @Html.EditorFor(Function(model) model.zip_code)
        @Html.ValidationMessage("zip_code", "*")
    </div>


所有这些看起来都很不错,但是jqxmaskedinput抛出以下错误。

   Uncaught TypeError: Object [object Object] has no method 'jqxmaskedinput'


并且jqxInput框工作正常。如果删除jqxInput框,则jqxmaskedInput可以正常工作。我以为这可能是两者之间的兼容性问题,但是在jqWidgets上,我找到了一个同时使用jqxInput和jqxmaskedInput的示例,因此这几乎没有兼容性问题。作为这个领域的全面菜鸟,我对可能造成这种情况的原因迷失了。欢迎任何建议。

最佳答案

JavaScript区分大小写。对.jqxmaskedinput的调用应该是.jqxMaskedInput

关于javascript - 捕获TypeError:对象[object Object]没有方法'jqxmaskedinput',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16848104/

10-09 16:52