Jquery скрипт работает споратично под Visual Studio 2010 в проекте MVC3

Question

Я пытаюсь создать «простую» страницу обслуживания пользователей для школьного проекта.Сценарий jquery для этой страницы не работает.

Мой проект использует Visual Studio 2010 и инфраструктуру MVC3.Оба обновлены до последней версии.В проекте используется движок Razor View.Я выполняю тестирование только локально.

На одной странице я успешно использую полный календарь Адама Шоу.Для меня это доказывает, что это не проблема 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>

Я использую следующие ссылки jquery в _Layout.chtml:

<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

Проблема в том, что ваши скрипты используют относительные пути.

В MVC3 и бритве вы должны объявить свои скрипты следующим образом ...

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

Answer 2

Проблема может заключаться в том, что вы пытаетесь прикрепить события к объектам DOM, которые еще не существуют.Вы можете попробовать обернуть свой код jQuery в $(document).ready(function() { //your code here }); или переместить тег 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>