Jquery script working sporatically under Visual Studio 2010 in MVC3 project

I am trying to create a "simple" user maintenance page for a school project. The jquery script for this page does not work.

My project is using Visual Studio 2010 and the MVC3 framework. Both are updated to the latest version. The project is using the Razor view engine. I am doing my testing locally only.

On one page, I am using Adam Shaw's Full Calendar successfully. To me, that proves that it is not a Visual Studio issue.

I have tested the code using jsFiddle.net and both the HTML and script worked successfully.

I have examined the page using Firebug and it shows the jquery script file is being successfully loaded.

My html from the view looks like this:

<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>

I am using the following jquery links in _Layout.chtml:

<script src="/Scripts/jque开发者_C百科ry-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

My testing script looks like:

$('.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");

My CSS file looks like:

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

Does anyone have any advice on where I should continue looking to fix this issue?

The issue could be that you're trying to attach events to DOM objects that don't exist yet. You can either try wrapping your jQuery code with $(document).ready(function() { //your code here }); or move your script tag to the bottom of your view page. Personally I would do both.

The problem is your scripts are using relative paths.

In MVC3 and razor you should declare your scripts like this...

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

Wrap you jQuery in

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

so it executes when the DOM is ready. Also are you sure you references to you script files are correct? I would use root relative paths ('/') and not page relative paths ('../') like

<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>