CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc
user4403536
user4403536

Reputation:

click on button dont trigger jquery function

I have a Partial View in my MVC webshop that displays my shopping cart, but for some reason I'm not able to click the "trash" button.

This is my current code.

@model ShoppingCart
@foreach (var product in Model.Items)
{
    <li>
        <div class="b-cart-table ">
            <a href="#" class="image">
                <img width="70" height="70" src="@product.ImageUrl" alt="/">
            </a>
            <div class="caption">
                <a class="product-name" href="#">@product.Name</a>
                <span class="product-price">@product.Quantity x $ @product.Price.ToString("00.00").Replace(",", ".")</span>
                <div class="rating">
                    <span class="star"><i class="fa fa-star"></i></span>
                    <span class="star"><i class="fa fa-star"></i></span>
                    <span class="star"><i class="fa fa-star"></i></span>
                    <span class="star"><i class="fa fa-star"></i></span>
                    <span class="star star-empty"><i class="fa fa-star-o"></i></span>
                </div>
            </div>

            <button onclick="remove();" class="btn btn-remove removeitem"><i class="fa fa-trash fa-lg"></i></button>
        </div>
    </li>
}
<li>
    <div class="products-subtotal text-right">
        Cart Subtotal <span class="subtotal-price">$ @Model.TotalPrice().ToString("00.00").Replace(",", ".")</span>
    </div>
</li>

@section scripts{
    <script>
      $(document).ready(function () {
        $(document).on("click", ".removeitem", function () {
            alert($(this).text());
        });

        var remove = function(){
          alert("trigger");
        }
      };
    </script>
});

I know that there is multiple click / function on the button but its just to show what I have tried so far.

Upvotes: 1

Views: 74

Answers (3)

Nutshell
Nutshell

Reputation: 8537

You have a typo error when you init the document ready function, it should be this : 

$(document).ready(function () {

}); // here is your error

Also, change the name of the function because remove() is a jQuery function.

Fiddle : https://jsfiddle.net/64pmstja/9/

Source : https://api.jquery.com/remove/

Upvotes: 3

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

I'm kinda sure its your:

@section scripts{
}

I can't explain 100% why but when I use this inside a partial View I cant make my code work either. Try remove your code to your layout page or the page that contains the partialview and try then.

Upvotes: 0

Ajit
Ajit

Reputation: 31

The method you are using remove() is a jquery method to remove or delete an element from DOM itself. All bound events and jQuery data associated with the elements will be removed. https://api.jquery.com/remove/

Upvotes: 1

Related Questions