Javascript 未在HTML页面中执行脚本

我正在尝试使用脚本从我的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;
}

@节脚本
{
$（文档）.ready（函数（）{
$（'.cockbox'）。在（'click'，函数（）{
$.getJSON（url+'/'+$（this.data（'id'））
.完成（功能（数据）{
$。每个（数据、功能（键、项）{
$（“
”，{text:formatItem（item）}）
.appendTo（$（“#配料”）；
})
});
});
});
功能formatItem（项目）{
返回item.name+item.Volume+item.do剂；
}

}

HTML:

@foreach（型号为CocktailBasic鸡尾酒）
{


}

成分

---

我完全不熟悉使用脚本。除了脚本，其他一切都很好

没有类为

鸡尾酒

的元素，有一个元素具有此ID和

鸡尾酒

类

---

您必须将选择器更改为

$（“#鸡尾酒”）

或

$（“.cockbox”）

没有类为

鸡尾酒的元素，有一个元素具有此ID和
鸡尾酒
类

您必须将选择器更改为
$（“#鸡尾酒”）
或
$（“.鸡尾酒”）
我发现了几个潜在问题：


您多次使用同一ID“鸡尾酒”——ID需要
在页面中保持唯一性

CSS类是您的
jquery选择器是.cockbox，但您的css类是cockbox

我发现了几个潜在问题：


您多次使用同一ID“鸡尾酒”——ID需要
在页面中保持唯一性

CSS类是您的
jquery选择器是.cockbox，但您的css类是cockbox

您已将类定义为
class=“cockbox”
，并将单击处理程序添加为
$（'.cockbox'）
。您应该使用，
$（'.cockbox'）
您已经将类定义为
class=“cockbox”
，并且您已经将单击处理程序添加为
$（'.cockbox'）
。您应该使用，
$（'.cockbox'）

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