按钮上的jQuery脚本不起作用

时间:2018-06-26 11:17:09

标签: jquery html asp.net asp.net-mvc

我认为该脚本无法正常工作,因为一旦按下网站上的按钮,控制器就无法运行。一旦按下按钮,什么都不会发生。 随附了相关代码。.我很确定问题出在我的脚本上。

我的脚本:

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

1 个答案:

答案 0 :(得分:2)

为类重复按钮,而不是使用重复的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>