0

MVC4 アプリケーションに jQuery 日付ピッカーを導入しようとしていますが、日付ピッカー ウィジェットを起動するためのクリック イベントを取得できないようです。http://jqueryui.com/datepicker/で、これを実装する方法の簡単な例を示しています。ローカルで試してみると、期待どおりに動作しますが、MVC4 アプリケーションでは何もありません。

私のコードは次のとおりです。

<script src="@Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#expirydate').datepicker();
  });
</script>

<div class="nine columns bottom20">
  <div class="row">
     <h3>New Course details</h3>

      @using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
      {
        <div class="row">
          <div class="twelve columns" style="width:590px;">
            <div class="row">
              <div class="six columns">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" /><br />
              </div>
              <div class="six columns">
                <label for="author">Author:</label>
                <input type="text" id="author" name="author" /><br />
              </div>

              <div class="row">
                <div class="twelve columns" style="width:590px; margin-left:5px;">
                  <label for="description">Description:</label>
                  <input type="text" id="description" name="description" /><br />
                </div>
              </div>

              <div class="twelve columns" style="width:590px;">
              <div class="row">                    
                <div class="six columns">
                  <label for="participationpoints">Participation Points:</label>
                  <input type="text" id="participationpoints" name="participationpoints" /><br />
                </div>
                <div class="six columns">
                  <label for="expirydate">Expiry Date:</label>
                  <input type="text" id="expirydate" name="expirydate" /><br />
                </div>
              </div>
              </div>



              <div class="row">
                <div class="six columns">
                  <input type="hidden" id="uploaddate" name="uploaddate" /><br />
                </div>  
              </div>
            </div>
          </div>
        </div>            
          <div class="twelve columns"> 
          <input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
          </div> 
      }
    </div>   
  </div>

ここで何が起こっているのですか?

レイアウト内の他のスクリプトは次のとおりです。

<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/filedrag.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.sortable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.paginate.js")"></script>

そして、私のバンドル構成は次のとおりです。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery.js",
                    "~/Scripts/foundation.min.js",
                    "~/Scripts/modernizr.foundation.min.js",
                    "~/Scripts/jquery{version}.js",
                    "~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
                    "~/Scripts/jquery.touchSwipe.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
                    "~/plugins/flexislider/jquery.flexslider.js",
                    "~/plugins/camera/scripts/camera.min.js",
                    "~/plugins/camera/scripts/jquery.easing.1.3.js",
                    "~/plugins/camera/scripts/jquery.mobile.customized.min.js",
                    "~/plugins/titan/js/jquery.titanlighbox.js",
                    "~/plugins/titan/js/prettify.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/footable.js",
                    "~/Scripts/footable.sortable.js",
                    "~/Scripts/footable.filter.js",
                    "~/Scripts/footable.paginate.js",
                    "~/Scripts/jquery-2.0.2.js",
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery-ui-{version}.js"));
4

2 に答える 2

0

正しいコード:

$('#datepicker').datepicker();

css ファイル jquery-ui を確認してください。

jqueryのセレクター

#= ID

.= クラス

何らかの属性によって

$('a[href=www.google.com]')
于 2013-08-24T15:59:15.920 に答える