JavaScript не работает в ASP.Net MVC Entity framework

#javascript #asp.net-mvc #dom-events

#javascript #asp.net-mvc #dom-события

Вопрос:

Я пытаюсь подключить кнопку с помощью некоторого API, используя метод click, но он не работает. JS на остальной части моего веб-сайта работает нормально, но, похоже, мне это не нравится .. P.S Я новичок в asp .net и работаю с использованием руководства, поэтому, если что-то делается определенным образом, это потому, что так это сделано в руководстве. вот мой код страницы, которая создает проблему,

 @model IEnumerable<GigHub.Models.Gig>
@{
    ViewBag.Title = "Home Page";
}

<ul class="gigs">
    @foreach(var gig in Model)
    {
        <li>
            <div class="date">
                <div class="month">
                    @gig.DateTime.ToString("MMM")
                </div>
                <div class="day" style="background:#f7f7f7;color:#333;font-size:20px;padding:6px 12px;">
                    @gig.DateTime.ToString("d ")
                </div>
            </div>
            <div class="details">
                <span class="artist">
                    @gig.Artist.Name
                </span>
                <span class="genre">
                    @gig.Genre.Name
                </span>
                <button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
            </div>
        </li>
    }
</ul>

@section scripts
{
    <script>
        $(document).ready(function () {
            $("js-toggle-attendence").click(function (event) {
                var button = $(event.target);
                $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
                    button.removeClass("btn-default").addClass("btn-info").text("Going");
                }).fail(function () {
                    alert("Error Occured!");
                });
            });
        });
    </script>
}`

это div, который кажется проблемой

 <div class="details">
                    <span class="artist">
                        @gig.Artist.Name
                    </span>
                    <span class="genre">
                        @gig.Genre.Name
                    </span>
                    <button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
                </div>

и это скрипт

 @section scripts
    {
        <script>
            $(document).ready(function () {
                $("js-toggle-attendence").click(function (event) {
                    var button = $(event.target);
                    $.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
                        button.removeClass("btn-default").addClass("btn-info").text("Going");
                    }).fail(function () {
                        alert("Error Occured!");
                    });
                });
            });
        </script>
    }`

1. Видите ли вы какие-либо ошибки в консоли? Включен ли javascript в представление?

2. у меня были ошибки вроде libhelp.js не найден, и я добавил эти недостающие ссылки, но все еще не работает

Ответ №1:

В вашем селекторе jQuery для класса отсутствует «.», он должен быть:

 $(".js-toggle-attendence").click(function (event) {

Вместо:

 $("js-toggle-attendence").click(function (event) {

Ответ №2:

Для jQuery, если вы хотите упомянуть класс, используйте обозначения .

Если вы хотите указать идентификатор элемента, используйте обозначение #

В вашем коде вы пропустили обозначения. в строке

 $("js-toggle-attendence")

Чтобы исправить это, измените на

 $(".js-toggle-attendence")