Question

我正在尝试为学校项目创建一个“简单”的用户维护页面。此页面的jquery脚本不起作用。

我的项目使用的是Visual Studio 2010和MVC3框架。两者都更新到最新版本。该项目正在使用Razor视图引擎。我只在本地进行测试。

在一页上，我成功使用了Adam Shaw的完整日历。对我来说，这证明它不是Visual Studio的问题。

我使用jsFiddle.net测试了代码，HTML和脚本都成功运行。

我使用Firebug检查了该页面，它显示了jquery脚本文件已成功加载。

我的视图中的html如下所示：

<link href="../../Content/UserMaintainance.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/UserMaintainance.js" type="text/javascript"></script>

@model TourSystem2.Models.UserMaintainanceViewModel
<h2>User Maintainance</h2>
<table>
    <tr>
        <td>Delete</td>
        <td>Edit</td>
        <td>Login Name</td>
        <td>Full Name</td>
        <td>Rights</td>
        <td>Password</td>
        <td>Comments</td>
    </tr>

    <tr><td colspan = "7" class = "br"></td></tr>
    <tr id="1">
        <td><button type="button"  class = "deleteButton"></button></td>
        <td><button type="button"  class = "editButton"></button></td>
        <td>John Stone</td>
        <td>jstone</td>
        <td>A</td>
        <td>12345</td>
        <td>just some user</td>    
    </tr>
</table>

我在_Layout.chtml中使用以下jquery链接：

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

我的测试脚本如下：

$('.deleteButton').click(function () {
    alert("Deleting user");
});

$('.editButton').click( function () {
    alert("Editing user");
});

$(':button').click(function () {
    alert('Handler for .click() called.');
});

$(":button").css("border", "13px solid red");

我的CSS文件如下：

.deleteButton, .editButton
{
    width : 20px;
    height : 20px;
}

有没有人对我应该继续寻找解决此问题的方法有任何建议？

Answer 1

问题可能是您尝试将事件附加到尚不存在的DOM对象。您可以尝试使用$(document).ready(function() { //your code here });包装jQuery代码，也可以将script标记移到视图页面的底部。我个人也会这样做。

Answer 2

问题是你的脚本正在使用相对路径。

在MVC3和razor中你应该声明你的脚本......

<link href="@Url.Content("~/Content/UserMaintainance.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/UserMaintainance.js")" type="text/javascript"></script>

Answer 3

在

中包装jQuery

$(function () {
  //...
});

所以它在DOM准备好时执行。你还确定你引用的脚本文件是否正确？我会使用根相对路径（'/'）而不是页面相对路径（'../'），如

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

Jquery脚本在MVC3项目中的Visual Studio 2010下无聊地工作

3 个答案: