按钮上的 jQuery 脚本不起作用

Question

我认为脚本不起作用，因为一旦我按下网站上的按钮，我的控制器就没有运行。一旦我按下按钮，什么也没有发生。 附上相关代码。我很确定问题出在我的脚本上。

我的脚本：

    <script>
    $("#btn_add").click(function(event)
    {
        event.preventDefault();
        var url = '@Url.Action("AddToCart", "Cart", new {idinput = "IDINPUT", amount = "THEAMOUNTER"})';
        url = url.replace("THEAMOUNTER", $("#amounter").val());
        url = url.replace("IDINPUT", $(this).data("id"));
        window.location.href = url;
    });
</script>

html代码中的相关部分：

@foreach (var product in Model)
        {

            <figure class="portfolio-item col-md-4 col-sm-6">
                <img src="~/images/@product.Picture" class="img-responsive" />
                <div class="product-details">

                    <div class="form-group">
                        <label>Enter amount</label>
                        <div class="col-md-10">
                            <input type="text" id="amounter" />
                        </div>
                    </div>
                    <div>
                        <a id="btn_add" href="" data-id=@product.Id class="btn btn-info btn-lg" style="margin-left:60px">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Add to cart
                        </a><br />

Answer 1

给重复的按钮一个类，而不是使用重复的ids。比如.Mybtn

<a href="" data-id='@product.Id' class="btn btn-info btn-lg Mybtn" style="margin-left:60px">

将您的点击处理程序放在文档就绪部分。

<script>
    $(function(){
        $(".Mybtn").click(function(event)
        {
            event.preventDefault();
            var url = '@Url.Action("AddToCart", "Cart", new {idinput = "IDINPUT", amount = "THEAMOUNTER"})';
            url = url.replace("THEAMOUNTER", $("#amounter").val());
            url = url.replace("IDINPUT", $(this).data("id"));
            window.location.href = url;
        });
    });
</script>