скрипт не выполняется на странице HTML

Question

Я пытаюсь использовать сценарии для получения данных из моего Webapi.

Я пробовал несколько десятков разных сценариев, но ничего не было выполнено.

Сценарий:

@section scripts
{
<script>
$(document).ready(function () {

    $('.cocktail').on('click', function () {
        $.getJSON(url + '/' + $(this).data('id'))
            .done(function (data) {
                $.each(data, function (key, item) {
                    $('<li>', { text: formatItem(item) })
                        .appendTo($('#ingredients'));
                })
            });
    });
});

function formatItem(item) {
    return item.name + item.Volume + item.Dosage;
}

}

HTML:

<div class="row">
<div class="col-md-6">
    <ul class="list-group">
        @foreach (CocktailBasic cocktail in Model)
        {
            <li>
                <b><a href="#" id="cocktail" data-id="@cocktail.Id" class="Cocktail">@cocktail.Name</a></b>
            </li>
        }
    </ul>
</div>

<div class="col-md-6">
    <h2>Ingredients</h2>
    <ul id="ingredients"></ul>
</div>

Я совершенно новичок в использовании скриптов. все, кроме сценария работает нормально.

Answer 1

Я вижу пару потенциальных проблем:

• Вы используете один и тот же идентификатор "коктейль" несколько раз - идентификаторы должны быть уникальным на странице

• CSS-классы чувствительны к регистру - Ваш JQuery селектор. Коктейль, но ваш класс CSS является Коктейль.

Answer 2

Вы определили свой класс как class="Cocktail" и добавили обработчик кликов как $('.cocktail'). Вы должны использовать, $('.Cocktail').

Answer 3

Нет элемента с классом cocktail, есть элемент с этим идентификатором и классом Cocktail.

Вам придется изменить селектор на $("#cocktail") или $(".Cocktail")