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

类cocktail中没有元素，此ID和Cocktail类中有一个元素。

您必须将选择器更改为$("#cocktail")或$(".Cocktail")

Answer 2

我看到了两个潜在的问题：

您多次使用相同的ID“鸡尾酒”-ID需要在页面内唯一
CSS类为case sensitive-您的 jQuery选择器是.cocktail，但您的CSS类是Cocktail。

Answer 3

您已将类定义为class="Cocktail"，并将点击处理程序添加为$('.cocktail')。您应该使用$('.Cocktail')。

HTML页面中未执行脚本

3 个答案: