Nested button inside div

Question

Here is the situation. I have a box which is a div which contains another div which is basically a button. When the outer box is clicked it should redirect to a product details page. When the button within the box is clicked it should perform an ajax call which adds that particular item to cart.

Currently, when the outer box is clicked it redirects to product details page which is the desired functionality. However, when the inner button is clicked it adds to cart AND redirects while I do NOT want it to redirect but just add to cart. How do I achieve this desired functionality?

Here is the code for asp.net

@using LaptopMart.Models
@model IEnumerable<LaptopMart.Models.Product>


@{


            ViewBag.Title = "User Index";

}

<h2>title</h2>


@foreach (Product product in Model)
{
<div class="inline">
    <div  class="A" div-product-id ="@product.Id">
        <div class="card">
            <div class="card-head">
                <img src="~/Content/ProductImages/@product.Image" alt="product-image" class="card-product-image">
            </div>
            <div class="card-body">
                <div class="product-details">
                    <span class="product-title">@product.Name</span>
                    <span class="product-price">$<b>@product.Price</b></span>
                </div>
                <div>
                    <div class="btn-sm btn-primary js-add-to-cart" data-product-id="@product.Id" >Add to Cart</div>
                </div>
            </div>

        </div>
    </div>
</div>
}



@section scripts
{
<script>
    $(document).ready(function () {

        $(".A").on("click", function () {
            if ($(this).hasClass("js-add-to-cart")) {
                return;
            }
            else {
                window.location.href = "/user/ProductDetails/" + $(this).attr("div-product-id"); 
            }


        });
        $(".js-add-to-cart").on("click",
            function () {
                var button = $(this);

                $.ajax({
                    url: "/api/user/AddToCart/" + button.attr("data-product-id"),
                    method: "GET",
                    success: function () {

                        window.setTimeout(function () {
                            bootbox.hideAll();
                        }, 1000);

                        bootbox.alert("This has been added to cart");

                    }
                });

            });


    });


</script>
}

You might want to stop the event bubbling, -. https://api.jquery.com/event.stopimmediatepropagation/ — Keith, Feb 04 '18 at 22:23
Possible duplicate of [How to stop event propagation with inline onclick attribute?](https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — darksmurf, Feb 04 '18 at 22:25

score 0 · Accepted Answer · answered Feb 04 '18 at 22:30

In the function handling the click event for the inner div, stop the event from propagating to the outer div by calling event.stopPropagation() on the event:

function clickHandler(event) {
  event.stopPropagation();

  // Do your other stuff like Ajax calls
}

Nested button inside div

1 Answers1